각도 $ 시계가 트리거되지 않습니다.

Question

barcharts 그리기에 대한 지시문을 쓰려고하는데 데이터가 변경 될 때마다 차트를 다시 그립니다. 내 컨트롤러에서 나는 어떻게, 그리고

/* This directive will create a bar chart based on a dataTable. 
* It expects the first column of the data table to contain the labels. 
* If more than 2 columns (labels plus more than one value) are supplied, 
* all bars generated by values in one row will be grouped together, making 
* an easy visual comparison (benchmark). 
* If the option overlay is supplied, the odd value columns will be drawn 
* underneath the even values (Ex [label, col1, col2, col3, col4], with overlay = true will result 
* in col1 and col3 to be drawn underneath col2 and col4 
*/ 


angular.module('kapstok').directive('nBarChart', ['$window', '$location', '$parse', '$timeout', 
    function($window, $location, $parse, $timeout){ 
    return{ 
    restrict: 'E', 
    scope: true, 
    link: function(scope, elm, attrs){ 

     // Read all the different parameters givin in the directive declaration. 
     // If options are not given, they are replaced by their default values. 
     var dataGetter  = $parse(attrs.data); 
     var data = dataGetter(scope) || undefined; 
     if(!data){ 
     throw Error("No (valid) data source specified!"); 
     } 



      // Redraw the table once the table gets updated. However, usually multiple elements 
     // of the table will be updated at the same time, while the watch will get triggered 
     // at each update. To prevent this, we give it a timeout of half a second, 
     // allowing all the updates to be applied before the table is redrawn. 
     scope.$watch(function(){ return data.getVersion(); }, $timeout(drawChart, 500)); 

: 아무것도 증가 '버전'라는 속성이 변경 될 때마다 데이터 테이블, 모든 기능에서

controlmodule.controller('PrefscanController',['$http', '$scope', 'DataTable', function($http, $scope, DataTable){ 
    $scope.myData = new DataTable(); 
    $scope.myData.addColumn("string", "label"); 
    $scope.myData.addColumn("number", "survey"); 
    $scope.myData.addColumn("number", "benchmark"); 
    $scope.myData.addColumn("number", "break-it"); 

    $scope.myData.addRow(['test', 20, 10, 4]); 
    $scope.myData.addRow(['test2', 42, 13, 2]); 


    $scope.hideBenchmark = function(){ 
    console.log("myData.version = ", $scope.myData.getVersion()); 
    $scope.myData.hideColumn(2); 
    console.log("myData.version = ", $scope.myData.getVersion()); 
    } 

가있는 무엇이다 나는 현재이가 나는 시계를보고 싶다.

내 템플릿에는 hideBenchmark 함수를 호출하는 ng-click 버튼이 있습니다. 이 함수가 호출되고 dataTable 버전이 업데이트되지만 시도 할 때마다 시계가 트리거되지 않습니다.

내 hideBenchmark 함수에서 $ scope. $ appy()/$ scope. $ digest()를 호출하여 시계에 'true'를 추가하고 (객체 불균형을 찾는) 'attrs.data ','data.version '과 그것의 아무도는 시계를 방아쇠를 당기는 것처럼 보이지 않는다! 나는이 데이터로부터 독립된 범위에서 또 다른 변수를 만들 수 있다는 것을 알고 있습니다. 데이터를 변경할 때마다 그것을 변경하고 변경합니다. 그러나 그것은 추악하고 불필요한 것처럼 보입니다.

시계가 작동하지 않는 이유를 아는 사람이 있습니까? 내가 원하는 것을 어떻게 할 수 있습니까?

감사합니다,

리누스

Answer 1

선일에 의해 제안으로, 당신은 범위에 넣어해야합니다 당신이 그것을하지 않으면

scope: { 
    data: '=' 
} 

, 데이터가 내 업데이트되지 않으므로 지령. 여기에 바이올린

: 당신은 $ 시계에 함수 호출을 전달하는 http://jsfiddle.net/0t4z02yw/2/

Answer 2

, 그것을 참조하거나 선언해야한다, 나는 생각한다. 분명히

scope.$watch(function(){ 
     return data.getVersion(); 
    }, function(){ 
     $timeout(drawChart, 500) 
    }); 

, drawChart이 작동하는 동안 그 맥락에서 정의되어야한다 ... 당신은 $ 감시자이 버전의 값을 로깅 트리거되고 있는지 확인하기 위해 시도 할 수있는.

scope.$watch(function(){ 
     return data.getVersion(); 
    }, function(v){ 
     console.log(v) 
    }); 

참고 : 다른 모든 응답에 대해서는 범위에 추가해야한다는 내용은 false입니다. 사용자 정의 함수를 $ watcher에 전달하기 때문에 그렇게 할 필요가 없습니다. $parse 서비스를 통해 '데이터'요소를 얻는 방법이 좋습니다.

Answer 3

현재 작동하지 않는 이유는 아무 것도 외부 범위 (컨트롤러)가 내부 범위 (지시문)에 소화해야한다는 것을 알려주지 않기 때문입니다. 즉, 변경된 사항입니다. 데이터 개체가 지시문 범위에 속하지 않기 때문에 이러한 현상이 발생합니다.데이터가 변경 될 때 (통지 할

scope: {data: '='} 

아니면 함수 포인터를 전달할 수있는 방법의 커플은 처리하기 :
먼저, 당신은 지시에 데이터 개체를 전달하고 고립 된 범위를 만들 수 있습니다 귀하의 경우 hideBenchmark) :

scope: {hideBenchmark: '@'} 

Here는 첫 번째 방법에 대한 plunker입니다.