AngularJS - Refresh Directive from controller

Question

i've a directive that include an HTML file based on a scope variable. When HTML is loaded first time all is good. But when scope variable change by ng-clic i'm not able to recall directive.

Here is my directive:

my.directive('myType', function() {
return {
    restrict: 'A',
    replace: true,
    link: function($scope, element, attrs) {          
          var myHTML;
          if ($scope.aType==1) myHTML = "aaaa";
          if ($scope.aType==2) myHTML = "bbbb"; 

          $scope.contentUrl = 'library/template/tmp-' + myHTML + '.html';
    },
    template: '<div ng-include="contentUrl"></div>'
}});

$scope.aType is scope variable that change on ng-click. Thanks in advance.

Dan Beaulieu · Accepted Answer · 2016-01-21 15:01:08Z

7

You need to add a watch on aType or some kind of event to make you code run more than once(on linking):

something like this:

link: function($scope, element, attrs) {       
         $scope.$watch('aType', function(newVal, oldVal){
                   var myHTML;
                   if ($scope.aType==1) myHTML = "aaaa";
                   if ($scope.aType==2) myHTML = "bbbb"; 
                   $scope.contentUrl = 'library/template/tmp-' + myHTML + '.html';
         });   
    }

JSFIDDLE.

edited Jan 21, 2016 at 15:01

Dan Beaulieu

20k19 gold badges107 silver badges138 bronze badges

answered Apr 21, 2015 at 15:18

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

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

1 Comment

user1683405 Over a year ago

Thanks Amir. But now also first time template doesn't load (directive don't call ng-include in template)

Community · Accepted Answer · 2017-05-23 12:22:34Z

1

I would avoid using $watch() if you can, which you almost always can. You can always setup ng-click to pass variables from your directive to your controller, or modify @Amir Popovich's answer to do the logic in your controller, and not in the link function.

For an example on how to access methods in a directive from a controller check out: Access parent controller methods from directive?

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Apr 21, 2015 at 16:26

Fred

1,3732 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS - Refresh Directive from controller

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related