3

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

请参阅Plunker。#hardcodedalert 中的警报已编译并正确显示，但未编译 #dynamicalert 的内容。

编辑：

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

4

1 回答 1

4

我已经更新了你的 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>

编辑：更新以反映您的要求

于 2013-01-24T14:56:14.693 回答