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 回答