Angular directive is not compiling after ng-click

Question

The below code is not working after I click on the button. It seems the directive is not compiled again. Can anyone help me out with this !

HTML :

  <button ng-click="run()">click</button>
  <p>Hello {{name}}!</p>
  <customdir filterby="name"></customdir>

The similar code can be found here http://plnkr.co/edit/OQqLeUIoFNhkqSoeIdyM?p=preview.

Javascript :

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

$scope.name = 'World';

$scope.run = function() {
$scope.name = 'goal';
};

});
app.directive('customdir', function($compile) {
var getTemplate = function(filterby) {
switch (filterby) {
  case 'World':
    return '<div class="col-lg-1" id="ready">' +
      '<img ng-src="http://plnkr.co/img/plunker.png" style="height: 35px; width: 35px; margin-left: 70px; margin-bottom: 3px" />' +
      '</div>';
  case 'goal':
    return '<b>tttttt !!</b>';
  default:
    return '<b>Error !!</b>';
 }
}
return {
restrict: 'E',
scope: {
  filterby: '='
},
 link: function(scope, element, attrs) {
   var el = $compile(getTemplate(scope.filterby))(scope);
   element.replaceWith(el);
  }
 };
});

Aruna · Accepted Answer · 2016-11-30 06:44:20Z

You have to use scope.$watch('filterby', function(newValue, oldValue) { }) to handle this on the model change.

Working copy:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

$scope.run = function() {
$scope.name = 'goal';
};

});


app.directive('customdir', function($compile) {
var getTemplate = function(filterby) {
switch (filterby) {
  case 'World':
    return '<div class="col-lg-1" id="ready">' +
      '<img ng-src="http://plnkr.co/img/plunker.png" style="height: 35px; width: 35px; margin-left: 70px; margin-bottom: 3px" />' +
      '</div>';
  case 'goal':
    return '<b>tttttt !!</b>';
  default:
    return '<b>Error !!</b>';
 }
}
return {
restrict: 'E',
scope: {
  filterby: '='
},
 link: function(scope, element, attrs) {
     
   scope.$watch('filterby', function(newValue, oldValue) {
     var el = $compile(getTemplate(scope.filterby))(scope);
     element.replaceWith(el);
     element = el;
   });
  }
 };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.5/angular.js" data-semver="1.2.5"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <customdir filterby="name"></customdir>
    <button ng-click="run()">click</button>
  </body>

</html>

Community · Accepted Answer · 2017-05-23 12:30:51Z

1

change the sequence of when you compile vs place it in dom, read more about it here

var el =angular.element('your html');
element.replaceWith(el);
$compile(el)(scope);

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Nov 30, 2016 at 6:20

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Collectives™ on Stack Overflow

Angular directive is not compiling after ng-click

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related