コンパイルされたディレクティブをコンパイルされた場所から見ることができますか？

実行時に別のディレクティブtestChartをコンパイルするディレクティブtestDirectiveがあります。 testDirectiveには、この例で更新される変数scope.list = [1,2,3,4,5];があります。最初の実行中に指示文testChartは開始値の$scope.listを認識しますが、setIntervalには$scope.listが更新されます。 testChartの時計はコンパイルされません。何故ですか？コンパイルされたディレクティブをコンパイルされた場所から見ることができますか？

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<body ng-app="myApp"> 

<test-directive> 
</test-directive> 

<script> 

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

app.directive("testDirective", ["$compile", function($compile) { 
    return { 
     restrict: 'AE', 
     link: function (scope, element, attrs) { 

      scope.list = [1,2,3,4,5]; 

      setInterval(function() { 

      for (var i = 0; i < scope.list.length; i++) { 
       scope.list[i] = scope.list[i] * 2; 
      } 
      }, 10000);   

      let content = angular.element('<test-chart></test-chart>'); 
      element.append(content); 
      $compile(element.contents())(scope); 
     } 
    }; 
}]); 

app.directive('testChart', function() { 
      return { 
       restrict: 'E', 
       transclude: true, 
       controllerAs: 'chartCtrl', 
       template: '<div><ng-transclude></ng-transclude></div>', 
       controller: ['$scope', '$element', '$attrs', '$compile', function ChartController($scope, $element, $attrs, $compile) { 
        //var html = $element.html(); 
        $scope.$watch('list', function() { 
         console.log($scope.list); 
        });      

        $scope.chartId = $scope.$id; 
        //$element.html(html); 
        let content = angular.element('<div><div id="container'+ $scope.chartId + '"></div></div>'); 
        $element.append(content); 
        var html = $element.html(); 
        var hc = Highcharts.chart('container' + $scope.chartId, { 

        }); 
       }] 
      }; 
     })  
</script> 

</body> 
</html>

https://www.w3schools.com/code/tryit.asp?filename=FIW7BMREF7L2

出典

2017-08-25 President Camacho

これは$ watchの問題です。

ウォッチに配列を適用する必要がある場合、またはオブジェクトの角度が$ watchの3番目のパラメータを持つ場合は、角のドキュメントを確認してください。

問題ごとに、以下の変更を適用した後で解決されます。

$scope.$watch('list', function() { 
        console.log($scope.list); 
       },true);

とはい、あなたはまた、あなたがしようとしているより良いので、あなたは、このコアAPIを使用しようとしている場合、あなたは角に適用する必要がありますので、JavaScript APIののsetIntervalサイクルを消化するためTjaartファンデウォルト解答ごとに$間隔を追加する必要があります$インターバル角APIを使用してください。

出典

2017-08-25 11:20:07

正解はあなたの答えとTjaart van der Waltの組み合わせです –

あなたがオブジェクトに加えられた変更の角度通知する$intervalの代わりsetIntervalを使用する必要があります。

app.directive("testDirective", ["$compile", "$interval" function($compile, $interval) { 
    return { 
    restrict: 'AE', 
    link: function (scope, element, attrs) { 

     scope.list = [1, 2, 3, 4, 5]; 

     $interval(function() { 
     for (var i = 0; i < scope.list.length; i++) { 
      scope.list[i] = scope.list[i] * 2; 
     } 
     }, 10000);   

     let content = angular.element('<test-chart></test-chart>'); 
     element.append(content); 
     $compile(element.contents())(scope); 
    } 
}}]);

出典

2017-08-25 11:20:00

コンパイルされたディレクティブをコンパイルされた場所から見ることができますか？

答えて

関連する問題