AngularJS：如何编译服务添加的自定义指令？
使用AngularJS和UI引导，我想动态地向DOM添加警报。但如果我动态添加一个。#hardcodedalert中的警报已编译并正确显示，但未编译#dynamicalert的内容 编辑： 我以后希望在我的网页上的不同上下文和位置上显示警报，这就是为什么我为警报创建了一个构造函数，以便在每个需要警报的控制器中都有一个新实例。出于好奇，我想知道是否有可能动态添加标记，而不是将它们包含在html中。我必须以“角度方式”完成您要做的事情 您试图做的事情有一些问题。其中最大的一个是从控制器内部进行DOM操作。我看到您试图通过在服务中处理部分DOM来抵消这一点，但在使用JQuery选择该元素时，您仍然在控制器中引用DOM 总之，您的指令没有编译，因为您仍在以JQuery为中心的方式进行开发。根据经验，您应该让指令为您处理DOM元素的添加和删除。这将为您处理所有指令编译和处理。如果您以尝试的方式手动添加内容，则必须使用$compile提供程序来编译它们，并在作用域中运行它们。。。这也将是一场测试和维护的噩梦 另一个注意事项：我不确定您是否希望有一个服务返回一个带有构造函数的对象，所以我将它设置为一个对象。需要注意的是，服务是以单例方式创建和管理的，因此传递给任何控制器的$alertService的每个实例都是相同的。这是一种有趣的数据共享方式，尽管在大多数情况下建议使用$rootScope 代码如下：AngularJS：如何编译服务添加的自定义指令？,angularjs,Angularjs,使用AngularJS和UI引导，我想动态地向DOM添加警报。但如果我动态添加一个。#hardcodedalert中的警报已编译并正确显示，但未编译#dynamicalert的内容 编辑： 我以后希望在我的网页上的不同上下文和位置上显示警报，这就是为什么我为警报创建了一个构造函数，以便在每个需要警报的控制器中都有一个新实例。出于好奇，我想知道是否有可能动态添加标记，而不是将它们包含在html中。我必须以“角度方式”完成您要做的事情 您试图做的事情有一些问题。其中最大的一个是从控制器内部进行DOM
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>
{{alert.text}
添加更多警报。。。
编辑：更新以反映您的请求感谢您花时间解释-在SO中这样的回答对理解AngularJS有很大帮助。我使用返回构造函数对象的服务的原因是，在我的实际应用程序中，该服务包含多个函数，我希望有多个警报对象实例。我将修改我的问题以澄清我的目标。那么，它不应该改变我的答案太多。如果要在每个控制器中创建警报对象的新实例，仍然可以这样做，然后将范围属性设置为警报对象的警报数组。