배열의 매핑에 AngularJS 지시문을 바인딩합니다.

Question

개체 배열을 사용하는 지시문이 있습니다. 마크 업에서 지시어를 선언 할 때, 스코프에는 지시어에 필요한 지시어를 감싸는 오브젝트 배열이 있습니다. 그래서 배열에 map 함수를 적용해야합니다. 원본 배열에 대한 업데이트가 지시문에 반영되도록하려면 어떻게해야할까요? 내가 그들을 바인딩 할 때 다르게 표현 좀 치료를 할 필요가 생각 http://plnkr.co/edit/GUCZ3c

Answer 1

그 중에서도 함수가 매우 가벼운 작업 (예 : 빠른 계산)을 수행하지 않는 한 함수를 호출하지 마십시오. 이 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; }); 
    }); 
}); 

지시어 코드는 동일하게 유지됩니다. 플 렁커의 fork입니다.

업데이트 : $watch을 사용하여 @KrisBraun 조언에 따라 자동으로 이름 목록을 업데이트하도록 코드를 변경했습니다.

Answer 2

:

여기에 (내가 $의 많은 오류를 소화을 제외하고 대부분은 '직장'을보고 깜짝 놀랐다) 순진한 접근 방식과 Plunker있어 격리 된 범위. 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) { 
    } 
    }; 
});