6

当定义一个 ng-repeat 指令来迭代一个数组时，语法指定ng-repeat="friend in friends"，然后在模板中使用 interoplation 运算符，如下所示{{friend.name}}。

是否可以将属性分配给当前项目范围，而不是其中的变量？所以我可以打电话{{name}}而不是{{friend.name}}?

原因是我的指令在两个不同模板的范围内使用 - 例如，我可能有一个指令"userActions"既用于转发器，也用于不相关的模板，{{friend.name}} 但没有意义。我想避免人为地制造friend没有语义的对象。

我的用例是这样的：

我有一个渲染各种类型块的网格。一些伪代码：

<div ng-repeat="block in blocks">
   < cat block />

   < friend block >
         <userActions directive />
   </ friend block >

   < guitar block />

   .... more blocks
</div>

我还有一个朋友页面，其中包含完全相同的用户操作：

..fragment of friend page..
  <element ng-control="friend">
     <userActions directive />
  </element>

现在，如果我想使用中继器内块的属性，语法是{{block.name}}. 所以模板userActions包含这个。

但是，一旦我在朋友页面中使用了这个模板，我必须{{block.name}}在朋友控制器的范围内创建。但这没有意义，因为块仅存在于块网格的上下文中。我不应该创建这个block。

我想要做的只是{{name}}从userActions指令模板中调用，因为块范围和控制器都包含它。我不想创建一个对象，然后在我想使用该指令的每个范围内block人为地设置。block.nameuserActions

这是一个jsFiddle 来说明原因

4

2 回答 2

2

我决定将Mathew Berg和ganaraj提供的信息丰富的答案与我新发现的知识相结合，以创建一个有用的答案。

简短的回答是你真的不想那样做。

更长的答案是这样的：

使用ng-repeat="block in blocks" 时，会为每个块元素创建一个新作用域，并在每个块中创建每个块对象的属性scope.block。这是一件好事，因为这意味着可以通过引用、更新或 $watched 访问所有属性。

如果ng-repeat不这样做，并且所有属性都将被拍打到块的范围内，那么block（字符串、整数等）中的所有原语将只是从块对象复制到块范围对象。一个变化不会影响另一个，这很糟糕。更多信息在这里。

好的，既然我们已经确定这是一件好事而不是一件坏事，我们如何克服语义问题？我决定使用friendData对象容器作为指令范围内的对象，因此指令期望friend-data属性包含相关属性

angular.module('myApp',[])
.directive("lookActions", function(){
    return {              
        restrict: 'E',        
        template: "<input value='Kill -{{ friendData.name }}-' type='button'>",
        scope : {
            friendData : '='            
        }
    }
});

这样，无论我调用指令模板的上下文是什么，我都可以分配这个对象。

给定这些控制器上下文：

function gridCtrl($scope) {    
    $scope.blocks = [{ type: "cat", name: "mitzi"},{ type: "friend", name: "dave"},{ type: "guitar", name: "parker"}];
}


function friendCtrl($scope) {    
    $scope.data={
        name: "dave"
    }
}

如何调用指令 -

内ng-repeat：

    <div class="block" ng-repeat="block in blocks" >            
        <look-actions friend-data="block" />
    </div>

或者在不同的上下文中：

    <div ng-controller="friendCtrl">  
         <look-actions friend-data="data" />
     </div>

这是解决方案小提琴

感谢所有的帮助！

于 2013-04-04T19:40:44.680 回答
1

这完全取决于您如何构建指令。如果没有小提琴/plunkr，很难说出你的代码是什么样的，所以我在这里暗中尝试。现在我认为你想说的是，在你使用指令friend.name的上下文中没有意义。也许像 person.name 这样更通用的东西可能更合适。在这种情况下，您可以执行以下操作，以便将您希望与该人关联的内容传递给指令：

html

<div data-ng-repeat="friend in friends">
    {{ friend.name }}
    <div class="myDirective" data-person="friend"></div>
</div>

javascript

.directive("myDirective", function(){
    return {
        restrict: 'C',
        scope: {
            person: "=person"
        },
        template: "<div>{{ person.name }}</div>"

    }
});

jsfiddle：http: //jsfiddle.net/5aVLf/1/

于 2013-04-04T13:20:19.940 回答