发表新帖
发表新帖

Angular Directive refresh on parameter change

后端 未结
关注
5 1094
不思量自难忘°
不思量自难忘° 2020-12-04 13:08

I have an angular directive which is initialized like so:
相关标签:
5条回答
  • 臣服心动
    2020-12-04 13:45 
    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 讨论(0)
  • 春和景丽
    2020-12-04 13:49

    What you're trying to do is to monitor the property of attribute in directive. You can watch the property of attribute changes using $observe() as follows:

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

    }
  };
});

    Keep in mind that I used the 'compile' function in the directive here because you haven't mentioned if you have any models and whether this is performance sensitive.

    If you have models, you need to change the 'compile' function to 'link' or use 'controller' and to monitor the property of a model changes, you should use $watch(), and take of the angular {{}} brackets from the property, example:

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

    And in the directive:

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

    }
  };
});
    0 讨论(0)
  • 庸人自扰
    2020-12-04 13:51

    I hope this will help reloading/refreshing directive on value from parent scope 

    <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>
    0 讨论(0)
  • 逝去的感伤
    2020-12-04 13:54

    If You're under AngularJS 1.5.3 or newer, You should consider to move to components instead of directives. Those works very similar to directives but with some very useful additional feautures, such as $onChanges(changesObj), one of the lifecycle hook, that will be called whenever one-way bindings are updated. 

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

    Here's the docs for deepen into components.

    0 讨论(0)
  • 青春惊慌失措
    2020-12-04 13:56

    Link function only gets called once, so it would not directly do what you are expecting. You need to use angular $watch to watch a model variable.

    This watch needs to be setup in the link function.

    If you use isolated scope for directive then the scope would be

    scope :{typeId:'@' }

    In your link function then you add a watch like

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

    If you are not using isolated scope use watch on some_prop

    0 讨论(0)
 看不清?
提交回复
热议问题