Angular Directive refresh on parameter change

user_1322359 0
Viewed 132956

I have an angular directive which is initialized like so:

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

I'd like it to be smart enough to refresh the directive when $scope.some_prop changes, as that implies it should show completely different content.

I have tested it as it is and nothing happens, the linking function doesn't even get called when $scope.some_prop changes. Is there a way to make this happen ?

angularjs-scope angularjs-directive angularjs javascript
5 Answers

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.

user_54757930
Related