javascript - 我可以避免在 ng-repeat 循环中使用对象变量名吗？

Question

当定义一个 ng-repeat 指令来遍历一个数组时，语法指定 ng-repeat="friend in friends"，然后在模板中你可以像这样使用互操作符 {{friend.name}}.

是否可以将属性分配给当前项目范围，而不是其中的变量？那么我可以只调用 {{name}} 而不是 {{friend.name}} 吗？

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

---

我的用例是这样的:

我有一个网格，可以呈现各种类型的 block 。一些伪代码:

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

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

   < guitar block />

   .... more blocks
</div>

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

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

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

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

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

这是一个 jsFiddle to illustrate the cause

Answer 1

我决定结合 Mathew Berg 的信息性答案和 ganaraj用我新学到的知识来创建一个有用的答案。

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

---

较长的答案是这样的:

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

如果ng-repeat不会那样做，所有属性都会被打到 block 的范围内，然后是 block 中的所有原语。 (字符串、整数等)只会从 block 对象复制到 block 作用域对象。一个的改变不会影响另一个，这很糟糕。 More info on that here.

好吧，既然我们已经确定这是好事而不是坏事，那么我们如何克服语义问题呢？我决定使用 friendData对象容器作为我的指令范围内的对象，因此指令需要 friend-data属性来保存相关属性

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

这样我就可以分配这个对象，而不管我调用我的指令模板的上下文是什么。

给定这些 Controller 上下文:

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>

这是 solution Fiddle

感谢大家的帮助!