ng-在将已编译html设置为div后不起作用的指令。

Question

在将编译后的html设置为dynamic-html div之前，我的dynamicHtml工作正常。如您所见，指令中有一个onClick函数。

但不幸的是，在将编译后的html设置为div后，不再调用onClick。

var content = $compile(res)($scope);
$('dynamic-html').html(content);

我的dynamicHTML指令如下所示：

.directive('dynamicHtml', function($compile, $timeout) {
  return {
    restrict: 'E',
    transclude: true,
    link: function($scope, $element) {
      $scope.datePickers = {};

      $scope.onClick = function (variable, $event) {
        var currentTarget = $event.currentTarget;

          $scope.$parent.$parent.highlight(variable, true, currentTarget);
      };

如您所见，我尝试在指令中添加transclude。但这案子不管用。你能指导我解决这个问题吗？

Answer 1

看看下面的代码，

angular.module("myApp", [])

  .directive("compiled", function($compile){
    return {
      restrict: "AE",
      scope: {},
      link: function(scope, ele, attrs){
          var compiled = $compile("<div><hello-world></hello-world></div>")(scope);
          ele.replaceWith(compiled);
      }
    }
  })

  .directive("helloWorld", function(){
    return {
      restrict: "AE",
      scope: {},
      transculde: true,
      link: function(scope, ele, attrs){
        scope.sayhello = function(){
          alert("Hello World");
        }
      },
      template: '<button ng-click="sayhello()">Say Hello</button>'
    }
  })

<compiled></compiled>