user93 user93 - 3 months ago 10
AngularJS Question

value in directive not changing even after its input changes

my main controller code is as follows

var self = this;
self.info = {};

Restangular.all('detail').post(this.postbody).then(function(data){
// this.items = data.tiles;
self.items = Restangular.copy(data);
self.info = self.items.pd;
console.log(self.info);

});


the template for my main controller is as follows

<div ng-controller="prddetail as prd">
<pdinfotile dat=prd.info></pdinfotile>
<div>


In my directive I have used @ for one way binding and displayed the value but when new values gets updated it is not getting displayed after call from restangular and these values are not updated in directives attribute. How do I proceed thanks in advance.

Note:

angular.module('brandmarshal')
.directive('pdinfotile',function () {
return{
scope:{
dat:'@'
},
restrict : 'E',
templateUrl:'../../templates/pd/pd_info.html',
controllerAs:'ctrl',
bindToController:true,
controller: function() {
var self = this;
self.obj = JSON.parse(self.dat);
console.log(self.obj);
}
}
});

Answer

You have the wrong binding value setup.

@ is for passing in a string, etc.

= is for two way binding - kind of hacky considered now with enforcing 1 way flow.

< is the single way binding you are looking for!

for example:

angular.module('brandmarshal') .directive('pdinfotile',function () { return{ scope:{ dat:'<' //<------single way binding or try a = for 2 way binding }, restrict : 'E', templateUrl:'../../templates/pd/pd_info.html', controllerAs:'ctrl', bindToController:true, controller: function() { var self = this; self.obj = JSON.parse(self.dat); console.log(self.obj); } } });