it-swarm.com.ru

Angular Обновление директивы при изменении параметра

У меня есть директива angular, которая инициализируется следующим образом:

<conversation style="height:300px" type="convo" type-id="{{some_prop}}"></conversation>

Мне бы хотелось, чтобы он был достаточно умен, чтобы обновлять директиву при изменении $scope.some_prop, поскольку это означает, что он должен показывать совершенно другой контент.

Я проверил это как есть, и ничего не происходит, функция связывания даже не вызывается при изменении $scope.some_prop. Есть ли способ сделать это?

72
Luke Sapan

Функция Link вызывается только один раз, поэтому она не будет делать то, что вы ожидаете. Вам нужно использовать угловой $watch, чтобы посмотреть переменную модели. 

Эти часы должны быть настроены в функции связи.

Если вы используете изолированную область видимости для директивы, тогда область видимости будет

scope :{typeId:'@' }

В вашей функции ссылки, то вы добавляете часы, как

link: function(scope, element, attrs) {
    scope.$watch("typeId",function(newValue,oldValue) {
        //This gets called when data changes.
    });
 }

Если вы не используете изолированную область, используйте watch на some_prop

91
Chandermani

То, что вы пытаетесь сделать, это следить за свойством атрибута в директиве. Вы можете наблюдать свойство изменений атрибутов, используя $ наблюдаем () следующим образом:

angular.module('myApp').directive('conversation', function() {
  return {
    restrict: 'E',
    replace: true,
    compile: function(tElement, attr) {
      attr.$observe('typeId', function(data) {
            console.log("Updated data ", data);
      }, true);

    }
  };
});

Имейте в виду, что я использовал функцию «compile» в директиве, потому что вы не упомянули, есть ли у вас какие-либо модели и зависит ли это от производительности. 

Если у вас есть модели, вам нужно изменить функцию «compile» на «link» или использовать «controller», и для отслеживания свойств изменений модели вы должны использовать $ watch () и взять угловые скобки {{}} из свойства, например:

<conversation style="height:300px" type="convo" type-id="some_prop"></conversation>

И в директиве:

angular.module('myApp').directive('conversation', function() {
  return {
    scope: {
      typeId: '=',
    },
    link: function(scope, Elm, attr) {

      scope.$watch('typeId', function(newValue, oldValue) {
          if (newValue !== oldValue) {
            // You actions here
            console.log("I got the new value! ", newValue);
          }
      }, true);

    }
  };
});
36
j8io

Я надеюсь, что это поможет перезагрузить/обновить директиву на значение из родительской области 

<html>

        <head>
            <!-- version 1.4.5 -->
            <script src="angular.js"></script>
        </head>

        <body ng-app="app" ng-controller="Ctrl">

            <my-test reload-on="update"></my-test><br>
            <button ng-click="update = update+1;">update {{update}}</button>
        </body>
        <script>
            var app = angular.module('app', [])
            app.controller('Ctrl', function($scope) {

                $scope.update = 0;
            });
            app.directive('myTest', function() {
                return {
                    restrict: 'AE',
                    scope: {
                        reloadOn: '='
                    },
                    controller: function($scope) {
                        $scope.$watch('reloadOn', function(newVal, oldVal) {
                            //  all directive code here
                            console.log("Reloaded successfully......" + $scope.reloadOn);
                        });
                    },
                    template: '<span>  {{reloadOn}} </span>'
                }
            });
        </script>


   </html>
1
Abdul
angular.module('app').directive('conversation', function() {
    return {
        restrict: 'E',
        link: function ($scope, $Elm, $attr) {
            $scope.$watch("some_prop", function (newValue, oldValue) {
                  var typeId = $attr.type-id;
                  // Your logic.
            });
        }
    };
}
0
Gelio

Если вы используете AngularJS 1.5.3 или новее, вам следует рассмотреть возможность перехода к компонентам вместо директив . Они работают очень похоже на директивы, но с некоторыми очень полезными дополнительными функциями, такими как $ onChanges (changesObj), одна из хук жизненного цикла, который будет вызываться всякий раз, когда обновляются односторонние привязки. 

app.component('conversation ', {
    bindings: {
    type: '@',
    typeId: '='
    },
    controller: function() {
        this.$onChanges = function(changes) {
            // check if your specific property has changed
            // that because $onChanges is fired whenever each property is changed from you parent ctrl
            if(!!changes.typeId){
                refreshYourComponent();
            }
        };
    },
    templateUrl: 'conversation .html'
});

Вот документы для углубления в компоненты.

0
voodoo_patch