2

使用ng-repeat可以动态创建新的子作用域;我正在寻找一种方法来做同样的事情,但只有一个对象。

换句话说,而不是这个......

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

我想做这样的事情:

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

2 回答 2

3

我从来不需要这种类型的东西,但这是一个创建子范围的指令。

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

现在在这个范围内,$scope.src将引用您设置的内容。

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

这将使您限制您的范围,但是,您可能需要重新考虑您的需求,这通常是针对特定需求完成的,例如小部件或类似的东西。

于 2013-01-27T10:01:33.833 回答
1

这是一种解决方法:http://plnkr.co/edit/Vd4YtCYcZKs9mMQLPK8v? p =preview

第一个想法是将属性中指定的对象克隆到指令的范围内:

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

它效率不高(每次对象更改时,Angular 都应将其属性复制到范围内),但它是实现您想要的简单方法。

这个想法的问题是你只有单向绑定(从外部范围到内部)。

如果您有双向绑定,则需要对指令范围的更改做出反应以反映父级。有点儿:

 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();
    });
 }

我仍然认为最好将代码拆分为不同的部分/指令/等......

于 2013-01-27T11:08:20.820 回答