如何获得编译指令以从编译位置观察变量？

Question

我得到一个指令 testDirective，它在运行期间编译另一个指令 testChart。在 testDirective 中，我将有一个变量，在此示例中将更新它的 scope.list = [1,2,3,4,5];。在第一个运行期间，指令 testChart 将识别其起始值的 $scope.list，但是当 $scope.list 在 setInterval 中更新时。 testChart 中的 watch 无法编译。这是为什么？

<!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

Answer 1

您必须使用 $interval 而不是 setInterval 来通知 angular 您对对象所做的更改。

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);
    }
}}]);

Answer 2

这是 $watch 的问题。

如果您需要在数组或对象中应用 watch angular $watch 中有第三个参数，请查看 angular 文档。

根据您的问题，将在应用以下更改后解决。

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

是的，您还需要根据 Tjaart van der Walt 的回答添加 $interval 因为 setInterval javascript api 所以如果您要使用这个核心 api 那么您需要应用 angular 摘要循环所以你最好使用 $interval angular api.

如何获得编译指令以从编译位置观察变量？

How can I get a compiled directive to watch a variable from where it was compiled?

angularjs

angularjs-directive