4

オブジェクトの配列を取るディレクティブがあります。マークアップでディレクティブを宣言すると、スコープには、ディレクティブに必要なオブジェクトをラップするオブジェクトの配列が含まれます。したがって、配列に map 関数を適用する必要があります。元の配列に加えられた更新がディレクティブ内に反映されるようにする正しい方法は何ですか?

これは素朴なアプローチのプランカーです（多くの $digest エラーを除いて、ほとんどが「機能」していることに驚きました）：http://plnkr.co/edit/GUCZ3c

4

2 に答える 2

4

とりわけ、その関数が非常に軽量な作業 (たとえば、迅速な計算) を行う場合を除き、Angular 式から関数を呼び出すことは避ける必要があります。この質問には、その問題に関する詳細があります。

あなたの場合、名前リストをキャッシュしてディレクティブにバインドする必要があります。次に例を示します。

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; });
    });
});

ディレクティブ コードは同じままです。これがプランカーのフォークです。

更新$watch: @KrisBraun のアドバイスに従って、名前リストを自動的に更新するために を使用するようにコードを変更しました。

于 2013-08-14T23:06:48.023 に答える
1

式を分離スコープにバインドするときは、式を少し異なる方法で扱う必要があると思います。これが分岐したプランカーです。

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) {
    }
  };
});
于 2013-08-14T22:05:02.750 に答える