我能避免NG-repeat循环对象变量的名字吗？ [英] Can I avoid the object variable name in ng-repeat loop?

问题描述

当定义一个NG重复指令遍历数组，语法指定 NG-重复=朋友的朋友，然后在模板中使用interoplation运营商像这样 {{} friend.name} 。

When defining an ng-repeat directive to iterate over an array, the syntax specifies ng-repeat="friend in friends", and then within the template you use the interoplation operator like so {{friend.name}}.

是否有可能具有分配给当前项范围，而不是在它的可变的属性？所以，我可以打电话给刚 {{名称}} 而不是 {{} friend.name} ？

Is it possible to have the properties assigned to the current item scope, rather than a variable in it? So I could call just {{name}} instead of {{friend.name}}?

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

The reason being is that my directive is being used in the scope of two different templates - for example I might have a directive "userActions" that is used in both a repeater, and also inside an unrelated template where {{friend.name}} doesn't make sense. I would like to avoid artificially manufacturing the friend object where it doesn't have a semantic meaning.

我的使用情况是这样的：

我有呈现各种类型的块网格。有些伪code：

I have a grid that renders blocks of various types. Some psuedo code:

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

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

   < guitar block />

   .... more blocks
</div>

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

I also have a friend page, that contains the exact same user actions:

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

现在，如果我想用户中继器内部的块的属性，语法是 {{} block.name} 。因此，对于 userActions 模板包含这一点。

Now, if I want to user a property of the block inside the repeater, the syntax is {{block.name}}. So the template for userActions contains this.

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

However, once I use this template in the friend page, I must create {{block.name}} inside the scope of the friend controller. This does not make sense though, because the block only exists in the context of the block grid. I shouldn't have to create this block.

我希望能够做的，就是调用 {{名}} 从内部 userActions 指令模板，因为这两个块范围和控制器包含它。我不想创建一个块对象，然后人为地设定 block.name 在每个范围内，我想使用 userActions 指令。

What I want to be able to do, is just to call {{name}} from within the userActions directive template, since both the block scope and the controller contain it. I don't want to create a block object, then artificially set block.name in each scope where I want to use the userActions directive.

这里有一个的jsfiddle说明原因

Here's a jsFiddle to illustrate the cause

推荐答案

我已经决定马修的信息结合起来的答案伯格和<一个href=\"http://stackoverflow.com/questions/15810755/can-i-avoid-the-object-variable-name-in-ng-repeat-loop#comment22494624_15810755\">ganaraj与我的新发现的知识来创造一个有用的答案。

I've decided to combine the informative answers of Mathew Berg and ganaraj with my newfound knowledge to create a helpful answer to this.

简短的答案是您真的不想这样做，

较长的答案是这样的：

在使用 NG-重复=块以块，对每一块元素创建一个新的范围，每块对象的属性创建 scope.block 每个块的。这是一件好事，因为这意味着所有属性都可以通过引用访问，更新或$观看。

When using ng-repeat="block in blocks" , a new scope is created for each block element, and the properties of every block object are create in scope.block of each block. This is a good thing, because this means all properties can be accessed by reference, updated or $watched.

如果 NG-重复不会那样做，而且所有属性将只对块的范围，然后在所有原始数据块被掌掴（字符串，整型等），也只是从块对象块范围对象复制。在一个的变化将不会反映在其他，这是不好的。 <一href=\"https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance#wiki-ngRepeat\"相对=nofollow>更多关于这里的信息。

If ng-repeat wouldn't have done that, and all properties would just be slapped unto the block's scope, then all primitives in block (strings, ints, etc) would just be copied from the block object to the block scope object. A change in one will not reflect on the other, and that's bad. More info on that here.

好了，所以现在我们已经决定，是一件好事，而不是坏事，我们如何克服语义问题？我决定使用 friendData 对象容器作为对象对我指令的范围，因此该指令预计朋友数据属性来保存相关属性。

Ok so now that we've decided that's a good thing rather than a bad thing, how do we overcome the semantic issue? I've decided to use the friendData object container as the object on the scope of my directive, and so the directive expects the friend-data attribute to hold the relevant properties

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

这样无论我可以将这个对象，上下文的，我打电话给我的指令模板。

This way I can assign this object regardless of which context I'm calling my directive template.

由于这些控制器上下文：

Given these controller contexts:

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


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

如何调用指令 -

How to call the directive -

在一个 NG-重复：

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

或者在不同的上下文中：

Or in a difference context:

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

这里的解决方案小提琴

感谢所有帮助！

这篇关于我能避免NG-repeat循环对象变量的名字吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！