Question

我有一个半复杂的指令。这是用作模板的HTML ...

<div ng-hide="hidden" class="alert-container">
  <div ng-class="startFade ? ['alert-box', 'fade', colorClass] : ['alert-box', colorClass]">
    <span class="glyphicon glyphicon-alert"></span><p>{{ content }}</p>
  </div>
</div>

这是相关的JS ......

svs.directive("alertBox", function () {
  return {
    restrict: "E",
    templateUrl: "resources/html/directives/alertBox.html",
    link: function(scope, element, attrs, ctrl) {
      ctrl.init(element);
    },
    controller: function($scope, $timeout, alertBoxService) {
      var context = this;
      function trigger(content, color) {
        $scope.content = content;
        $scope.colorClass = color;
        $scope.hidden = false;
        $scope.hide();
      }
      function init(element) {
        context.element = element;
        context.callback = trigger;
        alertBoxService.register(context);
      }
      context.trigger = trigger;
      context.init = init;
    }
  };
});

该指令补充了我打算注入控制器的服务。这是服务的JS ......

svs.service("alertBoxService", function($compile) {
  var alertBoxes = [];
  var alertCounter = -1;
  this.register = function(ctrl) {
    alertBoxes[alertCounter] = ctrl;
  }
  this.trigger = function(content, color) {
    alertCounter++;
    angular.element(document.getElementById('alert-boxes')).append($compile("<alert-box></alert-box>"));
    if (typeof(color) === 'undefined') color = "red";
    alertBoxes[alertCounter].callback(content, color);
  }
});

我的想法是拥有一个可以注入我的控制器的服务。当我在该服务上调用trigger方法时，我可以提供颜色和一些内容。然后，服务编译指令的新实例，新编译的指令将自身注册到服务，然后trigger方法将指令的回调传递给颜色和内容。

我相信我的问题在于编译新元素。在控制台中，我收到此错误...

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

这里有什么问题，如何修改我的代码以达到我想要的结果？

创建服务以动态地将指令附加到DOM元素？

0 个答案: