Question

使用AngularJS和UI Bootstrap，我想动态地向DOM添加警报。但是，如果我动态添加＆lt; alert＆gt;元素到DOM，它不是自动编译的。我试图使用$ compile但它似乎不理解核心AngularJS中不存在的标记名称。我怎样才能做到这一点？它甚至是在服务中“手动”向DOM添加元素的正确方法吗？

见Plunker。 #hardcodedalert中的警报已正确编译和显示，但#dynamicalert的内容未编译。

修改

我后来希望在我的网页上显示不同上下文和位置的警报，这就是我为警报创建构造函数的原因，在每个需要警报的控制器中都有一个新实例。为了好奇，我想知道是否可以添加＆lt; alert＆gt;动态标记，而不是将它们包含在html中。

Answer 1

我updated your plunker要做你想做的“角度方式”。

您尝试做的事情有一些问题。其中最大的是来自你控制器内的DOM操作。我看到你试图通过在服务中处理它的一部分来抵消它，但当你使用JQuery来选择那个元素时，你仍然在控制器中引用DOM。

总而言之，你的指令并没有编译，因为你仍然以一种以JQuery为中心的方式开发。根据经验，您应该让指令处理为您添加和删除DOM元素。这将为您处理所有指令编译和处理。如果你按照你尝试的方式手动添加东西，你将不得不使用$ compile提供程序来编译它们并在范围内运行它们......它也将是一个测试和维护的噩梦。

另一个注意事项：我不确定你是否打算让一个返回带有构造函数的对象的服务，所以我把它作为一个对象。需要注意的是，服务是以单一方式创建和管理的，因此传递给任何控制器的$ alertService的每个实例都是相同的。这是一种分享数据的有趣方式，尽管在大多数情况下建议使用$ rootScope。

以下是代码：

app.factory('alertservice', [function() {
  function Alert() {
    this.alerts = [];
    this.addAlert = function(alert) {
      this.alerts.push(alert);
    };
  }
  return {
    Alert: Alert
  };
}]);

app.controller('MainCtrl', function($scope, alertservice) {
  var myAlert = new alertservice.Alert();
  $scope.alerts = myAlert.alerts;
  $scope.add = function() {
    myAlert.addAlert({"text": "bar"});
  };
});

以下是更新标记的重要部分：

  <body ng-controller="MainCtrl">
    <div id="dynamicalert">
      <alert ng-repeat="alert in alerts">{{alert.text}}</alert>
    </div>
    <button ng-click="add()">Add more alerts...</button>
  </body>

编辑：已更新以反映您的请求

AngularJS：如何编译服务添加的自定义指令？

1 个答案: