change directive when scope variable changes

Question

I am using http request to get data from json file which I than use in controller.

    app.controller('mainCtrl', ['$scope', 'loaderService', function ($scope, loaderService) {
   //gets data from service 
        loaderService.getLoadedHtml().then(function (result) {
            $scope.fields = result.data;
        });
    }]);

I need to update directive when this $scope.fields change as

app.directive('dform', function () {
    return {
        scope: {
            action: '@',
            method: '@',
            html: '='
        },
        link: function (scope, elm, attrs) {
            var config = {
                "html": scope.fields
            };

            scope.$watch('fields', function (val) {
                elm.dform(config);
            });

            //console.log(config);
            //elm.dform(config);
        }
    };
})

and here is how I am using this directive

<div html="fields" dform></div>

But in my case when $scope.fields changes, i get scope as undefined in my directive $watch function.

Question:

How can I get the updated value for scope.fields in scope.$watch function?

tasseKATT · Accepted Answer · 2016-12-26 13:40:19Z

2

You need to give the directive access to fields by adding a binding for it:

scope: {
  action: '@',
  method: '@',
  html: '=',
  fields: '='
}

And HTML:

<dform fields="fields" ...

The value might be undefined the first time, then you don't want to call dform:

scope.$watch('fields', function(newValue, oldValue) {

  if (newValue === oldValue) return;

  var config = {
    "html": newValue
  };

  elm.dform(config);
});

Update

With this HTML:

<div html="fields" dform></div>

You just need to watch html instead, no need for $parent or adding fields as a binding:

scope.$watch('html', ...

edited Dec 26, 2016 at 13:40

answered Dec 26, 2016 at 12:50

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeGenius Over a year ago

i don't want to create field as a new attribute here. I updated my question for better understanding.

Estus Flask · Accepted Answer · 2016-12-26 14:11:07Z

Usually for directives that should be as transparent as possible, no new scope is supposed be used. Having a new scope also prevents other directives from requesting a new scope on the same element.

If only one of the attributes is supposed to be dynamic, it is as simple as

scope: false,
link: function (scope, elm, attrs) {
    scope.$watch(function () { return scope[attrs.html] }, function (val) {
        if (val === undefined) return;

        var config = {
            action: attrs.action,
            method: attrs.method,
            html: val
        };

        elm.dform(config);
    });

}

Alternatively, bindToController can be used in more modern, future-proof fashion (depending on what happens with html, $scope.$watch can be further upgraded to self.$onChanges hook).

scope: true,
bindToController: {
    action: '@',
    method: '@',
    html: '='
},
controller: function ($scope, $element) {
    var self = this;

    $scope.$watch(function () { return self.html }, function (val) {
        if (val === undefined) return;

        var config = {
            action: attrs.action,
            method: attrs.method,
            html: val
        };

        $element.dform(config);
    });
}

Considering that html="fields", the code above will watch for fields scope property.

user6746249 · Accepted Answer · 2016-12-26 13:02:32Z

0

use $parent.fields instead of fields

answered Dec 26, 2016 at 13:02

user6746249

7 Comments

Estus Flask Over a year ago

@Umar Using $parent in a directive with isolated scope is antipattern.

CodeGenius Over a year ago

@estus Thank you for the suggestion. Yes its against pattern, but I am in situation where I cannot use any workaround than this.

Estus Flask Over a year ago

@Umar See the other answer, that's the correct one. It isn't obvious from your question why it isn't applicable here.

CodeGenius Over a year ago

@estus Actually it is a jquery plugin. Here is it's full demonstration. stackoverflow.com/questions/41323138/… I just need fields. so html is extra here for me.

Estus Flask Over a year ago

@Umar In this case I would suggest to use bindToController instead of isolated scope (like it is shown here stackoverflow.com/a/31415287/3731501). It allows to maintain proper scope hierarchy while still having bindings.

|

Collectives™ on Stack Overflow

change directive when scope variable changes

3 Answers 3

Update

1 Comment

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

1 Comment

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related