Question

在AngularJS中，当父项发生更改时，子项将绑定新的更改，自动。但是，仅在HTML文件中才执行此过程，但不在JS文件中。

有时候，即使不是总是如此，我们希望在JS文件中也能达到相同的目的。

通过JS文件初始化指令，如下所示：

// statusBadge.js directive
app.directive("statusBadge", ($rootScope, ArrayManipulation, Http, Cast, Modules, Toast) => {
  return {
    templateUrl: "/shared/status-badge/status-badge.html",
    scope: {
      bindModel: "=ngModel",
      statusChangingRequiredModules: "=",
      statusOptionsToBeHide: "<",
      onChange: "=",
      resource: "@"
    },
    link: function($scope, element, attrs) {

      if ($scope.bindModel==$rootScope._id) {
        $scope.active = true;
      }

    }
  }
});

// statusBadge.html directive 
<span ng-show="active">
  Active
</span>

// parent.js 
$scope._id = "123";

// app.js 
$rootScope._id = "123";

// parent.html 
<status-badge ng-model="_id"></status-badge>

现在，当数据同步时，将显示“活动”，因为它会由初始化提供。

但是，当异步工作时-例如从远程服务器接收数据，我必须加入ng if，像这样：

// app.js 
setTimeout(function () {
  $scope._id = "123";
}, 10);

// parent.html
// notice the ng-if
<status-badge ng-model="_id" ng-if="_id"></status-badge>

如果我不提供上述ng-if，则将初始化指令配置没有实际数据。

稍后，前端将具有数据，因为我一开始就提到过-AngularJS 绑定双向数据，但仅绑定到HTML文件。

现在我知道我可以在JS文件中放置观察者了，就像这样：

// statusBadge.js directive
app.directive("statusBadge", ($rootScope, ArrayManipulation, Http, Cast, Modules, Toast) => {
  return {
    templateUrl: "/shared/status-badge/status-badge.html",
    scope: {
      bindModel: "=ngModel",
      statusChangingRequiredModules: "=",
      statusOptionsToBeHide: "<",
      onChange: "=",
      resource: "@"
    },
    link: function($scope, element, attrs) {

      $scope.$watch("bindModel", function() {
        if ($scope.bindModel==$rootScope._id) {
          $scope.active = true;
        }
      }, true);

    }
  }
});

但是每次都可以这样整洁，有时观察者的名单很长：

// almost all of them are two way data binding, but resource and statusOptionsToBeHide
scope: {
  bindModel: "=ngModel",
  statusChangingRequiredModules: "=",
  statusOptionsToBeHide: "<",
  onChange: "=",
  resource: "@"
}

那么，对此有什么解决方案，最佳实践或只是首选的工作方式？

我应该在每次更改时都添加ng-if，并且每次将其设置为false都可能会导致不良的UI，因为整个列表或组件每次更改都会刷新-看起来很糟糕。< / p>

我应该放置大量的观察者吗？

或者对此有什么好的解决方案？

请注意，我已经在Stack中看到了这个问题： $watch'ing for data changes in an Angular directive

但是他们告诉那里应该有一个观察者，但是我需要一个“多个”观察者。

AngularJS隔离指令监视所有两种数据绑定的更改

0 个答案: