我怎樣才能得到一個編譯指令，從它被編譯的地方看一個變量？

我收到了一個指令testDirective，它在運行時編譯另一個指令testChart。在testDirective我將有一個變量，在本例中它將被更新爲scope.list = [1,2,3,4,5];。在第一次運行期間，指令testChart將識別其起始值$scope.list，但$scope.list在setInterval中得到更新。 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中有第三個參數，請檢查角度文件。

根據您的問題，它將被解決後應用下面的變化。

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

，是的，你還需要$間隔添加爲每賈爾特·凡·德·沃爾特的答案，因爲setInterval的的JavaScript API，所以如果你打算使用這個核心API，那麼你需要應用的角度消化週期，因此更好的是你要使用$ interval angular 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

我怎樣才能得到一個編譯指令，從它被編譯的地方看一個變量？

回答

相關問題