필터를 사용하여 ng-repeat 결과를 자식 지시문에 전달하려고하지만 무한 다이제스트주기 오류가 발생합니다.ng-repeat 필터링 된 목록을 사용자 지정 지시문에 전달하는 방법

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-app="myApp"> 
    <table ng-controller="repeatCtrl"> 
    <thead></thead> 
    <tr ng-repeat="x in (filteredItems = (list | filter: evens))"> 
     <td>{{x}}</td> 
    </tr> 
    <tfoot> 
     <tr> 
     <td footer-directive="" repeat-ctrl="repeatCtrl" list='filteredItems'></td> 
     </tr> 
    </tfoot> 
    </table> 
</body> 

</html>

JS

var app = angular.module("myApp", []); 

app.controller("repeatCtrl", function($scope) { 
    var foo = []; 
    for (i = 0; i < 100; i++) { 
    foo.push(i); 
    } 
    $scope.list = foo; 
    $scope.evens = function(val) { 
    return (val % 2 === 0); 
    }; 

}); 

app.directive('footerDirective', function() { 
    return { 
    restrict: 'EA', 
    template: 'List: {{filteredItems}}', 
    link: function(scope, element, attrs) { //Infinite digest loop 
     scope.$watch('filteredItems', function(newValue, oldValue) { 
     console.log(newValue); 
     }); 
    } 
    } 
});

당신은 필터링 된 목록이 제대로 채워져 있는지 볼 수 있지만, 무한이

출처

2017-04-20 Aeisys

이 문제점을 발견했습니다.

I shoul d는 filteredItem에 $ watch 대신 $ watchCollection을 사용했습니다.

출처

2017-04-20 22:34:24 Aeisys

이 require:을 제거하려고 루프를 소화있을 수 있으며,아래 모든 항목

app.directive('footerDirective', function() { 
return { 
    template: 'List: {{list}}', 
    link: function(scope, element, attrs) { 
     console.log(scope.list) 
    } 
}});

행운을 빕니다 -여기 https://docs.angularjs.org/guide/directive & 또한 https://github.com/angular/angular.js/issues/9554

, 당신은 link:function()이

귀하의 지침보다 다음과 같아야있는 경우가 controller:function() 필요하지 않습니다 여기에 격리 된 범위에 대한 자세한 읽기

출처

2017-04-20 20:52:39

감사합니다. 코드를 수정했습니다. 목록을 필터링 할 때 함수를 트리거하는 방법을 여전히 확실하지 않습니다. scope.filteredItems에 $ watch를 넣었지만 여전히 무한 다이제스트 루프로 연결됩니다. – Aeisys

ng-repeat 필터링 된 목록을 사용자 지정 지시문에 전달하는 방법

HTML

JS

답변

관련 문제