Question

我有一个带有一组对象的指令。在标记中声明指令时，作用域有一个对象数组，用于包装指令所需的对象。所以我需要在数组上应用map函数。正确的方法是什么，所以对原始数组的更新会反映在指令中？

这是一个带有天真方法的Plunker（除了大量的$ digest错误外，我很惊讶地看到它主要是“工作”）：http://plnkr.co/edit/GUCZ3c

Answer 1

你应该避免从Angular表达式中调用一个函数，除非该函数执行一些非常轻量级的工作（例如，快速计算）。这个question有更多关于此事的细节。

在您的情况下，您应该缓存名称列表并将其绑定到指令。这是一个例子：

app.controller('MainCtrl', function($scope) {  
    $scope.people = [
        { name: 'Alice'}, 
        { name: 'Bob' },
        { name: 'Chuck' }
    ];

    $scope.addName = function(name) {
        $scope.people.push({name: name});
    };

    $scope.$watch(function() { return $scope.people.length; }, function() {
        $scope.names = $scope.people.map(function(p) { return p.name; });
    });
});

您的指令代码保持不变。这是你的Plunker的fork。

更新：我已经更改了代码，因此在@KrisBraun建议之后，我使用$watch自动更新名称列表。

Answer 2

我认为在将表达式绑定到隔离范围时，需要稍微区别对待表达式。 Here is a forked plunker

app.directive('myDirective', function($compile) {
  return {
    restrict: 'E',
    scope: {
      names: '&namesFunc'
    },
    template: '<div><p>JSON: {{names() | json}}</p><p>Names:</p><ul><li ng-repeat="name in names()">{{name}}</li></ul></div>',
    replace: true,
    link: function(scope, elem, attr, ctrl) {
    }
  };
});

将AngularJS指令绑定到数组的映射

2 个答案: