Is there a shorthand in AngularJS for creating child scopes in markup?

Question

Is there a shorthand in AngularJS for creating child scopes in markup?

The use of ng-repeat creates new child scopes on the fly; I'm looking for a way to do the same thing, but with a single object.

In other words, instead of this...

<div ng-controller="SomeController">
    <ul>
        <li>{{foo.bar}}</li>
        <li>{{foo.baz}}</li>
    </ul>
</div>

I'm looking to do something like this:

<div ng-controller="SomeController">
    <ul ng-scope="foo">
        <li>{{bar}}</li>
        <li>{{baz}}</li>
    </ul>
</div>

javascript
angularjs

Answer 1

I've never needed this type of thing but here is a directive which creates a child scope.

function RestrictScopeDirective() {
    return {
        scope: {src: "=restrictScope"}
    };
}

Now in this scope, $scope.src would refer to what you set to it.

<div ng-controller="SomeController">
    <ul restrict-scope="foo">
        <li>{{src.bar}}</li>
        <li>{{src.baz}}</li>
    </ul>
</div>

This would let you restrict your scope, but still, you might need to rethink about your needs, this is generally done for a spesific requirement, such as widgets or things like that.

Answer 2

Here is kind of sulution: http://plnkr.co/edit/Vd4YtCYcZKs9mMQLPK8v?p=preview

The first idea was to clone object specified in attribute into directive's scope:

scope.$parent.$watch(attrs.scope, function(nv) {
           angular.extend(scope, nv);
        },true);

It is not versy efficient (as each time object changes, Angular should copy its properties into scope), but it is simple way how to achieve what you want.

Problem with that idea is that you have only one-way binding (from outer scope to inner).

In case if you have two-way binding you need to react on changes of directive's scope to reflect on parent. Kind of:

 link: function(scope, element, attrs) {
    var watches = [];
    var unregister = scope.$parent.$watch(attrs.scope, function(nv) {
       watches.forEach(function(w) { w(); });
       watches.length = 0;
       for (var key in nv) {
         if (key) {
            scope[key] = nv[key];
            watches.push(scope.$watch(key, function(key)  { 
              return function(knv) {
              nv[key] = knv;
            };}(key)));
         }
       }
    },true);
    scope.$on('$destroy', function(){
       unregister();
    });
 }

Still I think it is better to split code into different partials/directives/etc...