Изолированная директива AngularJS отслеживает изменения для всех двухсторонних привязок данных - PullRequest
Новая
       24

Изолированная директива AngularJS отслеживает изменения для всех двухсторонних привязок данных

0 голосов
/ 14 ноября 2018

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

Теперь, когда данные синхронны, будет отображаться «Активный», так как его получение обеспечивается инициализацией.

Однако при работе в асинхронном режиме, например при получении данных с удаленного сервера, Я должен включить нг, если так: 

// 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 в каждый раз, когда он изменяется, и каждый раз делать его ложным - что может вызвать плохой интерфейс - поскольку весь список или компонент будет обновляться при каждом изменении - выглядит ужасно.

Должен ли я поставить тонны наблюдателей?

ИЛИ есть какое-нибудь хорошее решение для этого?

Обратите внимание, что я видел этот вопрос в стеке: $ наблюдает за изменениями данных в угловой директиве

Однако там говорят, что там должен быть наблюдатель, но мне нужен "множественный" наблюдатель.

...