Best IT Recipes

Angular Update directive when changing a parameter

I have an angular directive that initializes as follows:

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

I would like it to be smart enough to update the directive when changing $scope.some_prop , as this means that it should show completely different content.

I tested it as it is, and nothing happens, the binding function is not even called when $scope.some_prop . Is there any way to do this?

+62
javascript angularjs angularjs-scope angularjs-directive
Dec 31 '14 at 11:42
source share
4 answers

The Link function only receives a call once, so it will not do what you expect. You need to use angular $watch to view the model variable.

This watch must be configured in the communication function.

If you use an isolated area for the directive, then the area will be

scope :{typeId:'@' }

In your link function, you add hours like

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

If you are not using a dedicated usage area, look at some_prop

+78
Dec 31 '14 at 12:07
source share

What you are trying to do is control the attribute property in the directive. You can view the attribute change property with $ observ () 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 compilation function in the directive here because you did not mention if you have any models and whether it depends on performance.

If you have models, you need to change the compilation function to a “link” or use the “controller” and control the property of model changes, you should use $ watch () , and take the brackets from the property from angular {{}}, for 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); } }; });
+31
Dec 31 '14 at 12:07
source share
 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. }); } }; }
+1
Mar 22 '15 at 19:38
source share

I hope this helps reload / update the directive by value from the 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>
+1
Sep 08 '17 at 8:19 on
source share


More articles:


All Articles