AngularJS 범위 변수가 사용자 지정 지시문에서 평가할 때까지 기다립니다.

Question

AngularJS에서 내 방식을 꼼짝 않고 바라보고 있습니다.

나는 정의 지시어 만들었습니다

app.directive('myScroll',function(){ 
return { 
    restrict: 'A', 
    transclude: true, 

    template: '<div ng-transclude></div>', 
    link: function(scope , element , attrs) { 

    element.addClass('scroll-pane'); 

    scope.$watch('tasks', function(newval, oldval){ 
      if (newval ) 
      { 

      console.log(newval); 
      console.log(newval.length); 
     } 

    }); 

     console.log("afer watch exper"); 
     console.log (tasks); 



    } 


    }; 

을}); 다음 HTML과

: (내가 그 코드를 게시 할 예정입니다 필요한 경우) 작업 컨트롤러에 의해라는 서비스를 통해 평가 객체

<div my-scroll> 
     <ul> 
      <li data-ng-repeat="task in tasks" class="task-wrapper"> 
       <div class="task-element"> 
        <div class="name">{{task.name}}</div> 
        <div class="text">{{task.action}}</div> 
       </div> 
      </li> 
     </ul> 
    </div> 

.

지시어 코드에서 작업 객체가 정의되지 않았습니다. 작업 길이가 더 많은 CSS 명령을 실행해야하므로 ng-repeat가 끝날 때까지 기다리거나 작업 변수가 평가 될 때까지 기다려야합니다.

작업은 $ watch 문 외부와 내부에서 항상 정의되지 않습니다. 콘솔에서 "watch exper 후"가 먼저 표시되고 "in watch"가 표시되지만 여전히 값이 표시되지 않습니다. newval 객체에는 [move2 : function]이 있지만 길이 속성은 0을 계속 유지하지만 작업에 대한 리소스 배열을 유지합니다.

여기에 무엇이 누락되어 있으며 작업 변수를 계산할 때 명령을 어떻게 실행할 수 있습니까?

도우미에게 감사드립니다.

Answer 1

데이터를 참조하려면 scope.tasks을 사용해야합니다.

app = angular.module('myApp', []); 
app.directive('myScroll', function() { 
    return { 
     restrict: 'A', 
     transclude: true, 

     template: '<div ng-transclude></div>', 
     link: function (scope, element, attrs) { 

      element.addClass('scroll-pane'); 

      scope.$watch('tasks', function (newval, oldval) { 
       if (newval) { 
        console.log(newval); 
        console.log(newval.length); 
       } 
      }); 
      console.log("afer watch exper"); 
      console.log(scope.tasks); //this will log the actual data. 
     } 
    }; 
}); 

function Ctrl($scope) { 
    $scope.tasks = [{ 
     name: "task1", 
     action: "action1" 
    }] 
} 

Answer 2

3 매개 변수 전달 시도 - 볼 $에 사실을 :

scope.$watch('tasks', function(newval, oldval){ 
    if(newval){ 
     console.log(newval); 
     console.log(newval.length); 
    } 
},true);