Javascript 单击后未编译Angular指令

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

HTML:

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

点击
你好{{name}}

类似的代码可以在这里找到

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);
  }
 };
});

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.name='World'；
$scope.run=函数（）{
$scope.name='goal'；
};
});
应用程序指令（'customdir'，函数（$compile）{
var getTemplate=函数（filterby）{
开关（滤清器座）{
案例“世界”：
返回“”+
'' +
'';
案例“目标”：
返回“tttttt！！”；
违约：
返回“Error！！”；
}
}
返回{
限制：'E'，
范围：{
筛选项：'='
},
链接：函数（范围、元素、属性）{
var el=$compile（getTemplate（scope.filterby））（scope）；
元素。替换为（el）；
}
};
});

更改编译与将其放置在dom中的顺序，了解更多信息

---

更改编译与将其放入dom中的顺序，了解更多信息

---

您必须使用

scope.$watch（'filterby'，function（newValue，oldValue）{}）

来处理模型更改

工作副本：

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.name='World'；
$scope.run=函数（）{
$scope.name='goal'；
};
});
应用程序指令（'customdir'，函数（$compile）{
var getTemplate=函数（filterby）{
开关（滤清器座）{
案例“世界”：
返回“”+
'' +
'';
案例“目标”：
返回“tttttt！！”；
违约：
返回“Error！！”；
}
}
返回{
限制：'E'，
范围：{
筛选项：'='
},
链接：函数（范围、元素、属性）{
作用域：$watch（'filterby'，函数（newValue，oldValue）{
var el=$compile（getTemplate（scope.filterby））（scope）；
元素。替换为（el）；
元素=el；
});
}
};
});

安古拉斯普朗克
文件。写（“”）；
你好{{name}}

点击
您必须使用
范围。$watch（'filterby'，函数（newValue，oldValue）{}）
来处理模型更改

工作副本：


var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.name='World'；
$scope.run=函数（）{
$scope.name='goal'；
};
});
应用程序指令（'customdir'，函数（$compile）{
var getTemplate=函数（filterby）{
开关（滤清器座）{
案例“世界”：
返回“”+
'' +
'';
案例“目标”：
返回“tttttt！！”；
违约：
返回“Error！！”；
}
}
返回{
限制：'E'，
范围：{
筛选项：'='
},
链接：函数（范围、元素、属性）{
作用域：$watch（'filterby'，函数（newValue，oldValue）{
var el=$compile（getTemplate（scope.filterby））（scope）；
元素。替换为（el）；
元素=el；
});
}
};
});

安古拉斯普朗克
文件。写（“”）；
你好{{name}}

点击

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