0

큰 프로젝트에서이 문제가 발생했으며 가장 간단한 예제를 만들었습니다.데이터가 변경되면 지시문에서 ng-repeat가 업데이트되지 않습니다.

데이터가있는 컨트롤러가 있습니다. 이 데이터는 지시문에 입력되며 기본 ng-repeat를 사용하여 표시되어야합니다. 그러나 지시문 제어기가 실행되면 각도 변수를 아직 파싱하지 않았으므로 반복을 렌더링하지 않습니다.

미리 파싱이 필요한 외부 변수에서 반복 작업을 수행하도록하려면 어떻게해야합니까?

여기는 바이올린입니다. 확인 당신이 함수가 실행될 때이 정의되지 않은 것을이 같이 열려있는 콘솔을 가지고 있지만, 일초 이상 정의해야합니다 : http://jsfiddle.net/paulocoelho/xqLAs/2/

을 여기에 내 JS : 여기

var module = angular.module('testApp', []) 
    .directive('test', function() { 
    return { 
     restrict: 'E', 
     template: '<p ng-repeat="x in sl">{{x.val}}</p>', // this wont work :(
     scope: { 
      sl: '@sl' 
     }, 
     link: function ($scope, $element, $attrs) { 
      console.log($attrs.sl);  // this will return undefined 
      setTimeout(function(){ 
       console.log($attrs.sl); // this will return the correct list 
      },1000); 
     } 
    }; 
}); 

function sweetCtrl($scope){ 
    $scope.someList = 
    [ 
     {"val":"a"}, 
     {"val":"b"}, 
     {"val":"c"}, 
     {"val":"d"}, 
     {"val":"e"}, 
     {"val":"f"} 
    ]; 
} 

내 DOM이다

<div ng-app="testApp" ng-controller="sweetCtrl"> 
    <p>raw list: {{someList}}</p> 
    <p>repeat list:</p> 
    <test sl="{{someList}}"></test> 
</div> 

편집 : inputdata가 sl을 읽어야하는 이전 코드에서 오류가있었습니다.

솔루션과 함께 바이올린

은 여기에 있습니다 : http://jsfiddle.net/paulocoelho/xqLAs/3/

답변

2

당신이 사용하는 경우 '@', 결과는 항상 문자열입니다. 템플릿을 {{x.val}} 대신 {{x}} (으)로 변경하면 내 뜻을 알 수 있습니다. 나는 (지금) '@', 당신은 $를 사용하는 데 필요한 귀하의 other question에 설명 된 바와 같이,

<test sl="someList"></test> 

template: '<p ng-repeat="x in sl">{{x.val}}</p>', // this will work :) 
scope: { 
    sl: '=' 
}, 

또한 :

은 분리 범위, 사용 '='에 개체를 전달하려면 attrs. $ observe 또는 $ scope. $ watch() 비동기 적으로 값을 얻습니다 (문자열). '='를 사용하면 $ observe 또는 $ watch를 사용할 필요가 없습니다.

+0

네, 그게 전부입니다. @, =, & 것들이 나를 혼란스럽게합니다. 고마워요 :) 새 코드로 코드를 업데이트하겠습니다. – PCoelho