ng-click 后 Angular 指令未编译答案

【问题标题】：Angular directive is not compiling after ng-clickng-click 后 Angular 指令未编译
【发布时间】：2016-11-30 06:05:11
【问题描述】：

单击按钮后，以下代码不起作用。似乎该指令没有再次编译。谁能帮我解决这个问题！

HTML：

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

类似的代码可以在这里找到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);
  }
 };
});

【问题讨论】：

标签： javascript angularjs angularjs-directive angular-directive

【解决方案1】：

您必须使用scope.$watch('filterby', function(newValue, oldValue) { }) 来处理模型更改。

工作副本：

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="angular.js@1.2.x" 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>

【讨论】：

【解决方案2】：

更改编译时的顺序与将其放置在 dom 中，阅读有关它的更多信息here

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

【讨论】：