当数据改变时，Angular链接不会触发

Angular link not firing when data changed

本文关键字：链接 Angular 数据 改变      更新时间：2023-09-26

我有一个项目数组，其中每个项目都绑定到一个指令。当数组第一次构建时，一切正常，但是当我将数组重置为新值时，指令的链接函数不会触发。下面是HTML，其中框架数组的每个元素都包含许多项，每个项都绑定到我的指令cool-chart

var app = angular.module("theapp", []);
 app.controller("controller", function($scope) {
$scope.frames = []
   $scope.getData = function() {
     var frames = ["adsf","qwerty"];
     alert("got new Data")
     
     $scope.frames.push(frames)
    
   }
   
 });
 app.directive('coolChart', function() {
   return {
     restrict: 'E',
     scope: {
       data: '=data'
     },
     link: function(scope, element) {
       data = data.toUpperCase();
       alert("Link called with: " + data)
     }
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="theapp">
  <div ng-controller="controller">
    {{frames}}asdf
    <button ng-click="getData()">run get Data</button>
    <div class="outer-frame" ng-repeat="frame in frames track by $index">
      {{frame}}
      <div class="chart-container" ng-repeat="item in frame track by $index">
        {{item}}
        <cool-chart data="item"></cool-chart>
      </div>
    </div>
  </div>
</body>

你会注意到你看到了警报"got New Data"，但是没有调用指令链接函数。

我想错了吗?这里替换数组内容的正确模式是什么，以便绑定在每个数组元素上的数据触发正确的更改通知?

重新赋值时尽量不要破坏对初始帧数组的引用…相反，尝试清空它并将新数据合并到其中，这样引用就不会丢失

// declare empty array on scope
$scope.frames = [];
var getData = function () {
    // reset scope array
    $scope.frames.length = 0;
    // merge data into frames
    $scope.frames.concat(data); // not sure where data comes from
 };

或者，如果数据是从angular之外的事件中引入的，你需要告诉angular使用$apply()

运行digest

我去掉了while循环，因为我不明白为什么需要它

我整理了一个代码片段，与您的大部分代码相似。当您运行代码片段时，它似乎可以工作。如果可以，请以类似的方式编辑您的问题以尝试解决问题:)

更新:现在链接按预期触发警报。

var app = angular.module("theapp", []);
app.controller("controller", function($scope) {
  $scope.frames = []
  $scope.getData = function() {
    var frames = ["adsf", "qwerty"];
    console.log("got new Data")
    $scope.frames.push(frames)
  }
});
app.directive('coolChart', function() {
  return {
    restrict: 'E',
    scope: {
      data: '=data'
    },
    link: function(scope, element) {
      scope.data = scope.data.toUpperCase();
      alert("Link called with: " + scope.data)
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="theapp">
  <div ng-controller="controller">
    {{frames}}asdf
    <button ng-click="getData()">run get Data</button>
    <div class="outer-frame" ng-repeat="frame in frames track by $index">
      {{frame}}
      <div class="chart-container" ng-repeat="item in frame track by $index">
        {{item}}
        <cool-chart data="item"></cool-chart>
      </div>
    </div>
  </div>
</body>

相关文章：