AngularJS变频器业务
在我的webapp中，我正在使用Twitter引导程序进行UI。特别是它的警报组件。我想写一个简单的角度服务，包装引导的警报，有可能通知用户从任何和平的角度代码。如下所示：
Informer.inform("message", "ERROR"); // will result in alerting with `alert-error` class
Informer.inform("message", "INFO"); // will result in alerting with `alert-info` class我的想法是将模板附加到<body>的末尾
<div class="alert {{alertClass}} fade in informer" id="informer">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="valignCenterWrapper">
<div class="valignCenter" id="informerMessage">
{{message}}
</div>
</div>
</div>就像这样：
grfx.factory("Informer", function() {
return {
inform : function(message, type) {
// Here be dragons. How can I compile/append the template.
$("#inform").alert();
}
};
});我唯一想知道的是:如何用角度而不是jQuery来写这个？上面的代码对开始有用吗？互联网上的人说，我应该只使用，使用DOM操作指令。但我不明白:我没有任何现有的标记来对其应用指令。由于某些计算/用户交互，警报将附加到页面中。我应该使用哪些服务($compile、$parse、$document)来编译temlate并将其附加到主体的某个位置？
编辑：是否也可以在控制器之外获得angularjs服务。只是用常规的JS代码，这样我就可以编写getServiece("Informer").inform("", "")了
编辑2：好的，我现在有：
grfx.factory("Informer", function($compile, $rootScope) {
return {
inform : function(message, type) {
var scope = $rootScope.$new();
scope.message = message;
scope.type = type;
$(document.body).append($compile("<div class='alert {{type}} fade in informer' id='informer'><button type='button' class='close' data-dismiss='alert'>×</button><div class='valignCenterWrapper'><div class='valignCenter' id='informerMessage'>{{message}}</div></div></div>")(scope));
}
};
});有了这段代码，我就可以使用来自控制器的注入服务。但是，当我尝试在角码之外调用服务时，有一个问题：
angular.element(document).injector().get("Informer").inform("Message", "alert-error");这显示了{{message}}弹出，例如它没有正确编译模板。
回答 2
Stack Overflow用户
发布于 2013-02-11 10:16:00
在AngularJS中，我们应该关注模型操作，您的Informer服务也不例外--它应该只保存模型，而不应该关注DOM操作。DOM操作=指令的经验法则是一个非常好的规则，如果您遵循它，它将给您带来很多麻烦。
回到手头的问题上，解决方案是让服务专注于模型操作，并提供一个显示该模型的指令。让我们从服务开始：
app.factory('Informer', function(){
var messages = [];
var Informer = {};
Informer.inform = function(msg, type) {
messages.push({
msg: msg,
type: type
});
};
Informer.allInfos = function() {
return messages;
};
Informer.remove = function(info) {
messages.splice(messages.indexOf(info), 1);
};
return Informer;
});当此服务准备就绪时，您可以轻松地在控制器(甚至在其他服务中)中使用它：
app.controller('MainCtrl', function($scope, Informer) {
Informer.inform("error message", "error");
Informer.inform("info message", "info");
$scope.allInfos = Informer.allInfos;
$scope.remove = Informer.remove;
});最后，要呈现警报，您可以直接使用引导标记，或者编写一个非常简单的指令来封装它。在这里，我使用来自http://angular-ui.github.com/bootstrap/的警报指令
<body ng-controller="MainCtrl">
<alert ng-repeat="alert in allInfos()" type="alert.type" close="remove(alert)">{{alert.msg}}</alert>
</body>当然，您不需要使用来自回购的指令，您可以创建自己的指令，或者在需要时使用原始标记。
下面是一个演示工作示例的柱塞：http://plnkr.co/edit/VxAcjHFhxXODFB5iAfyX?p=preview
总括而言：
- 作为经验法则，不要在指令之外执行DOM操作
- 处理模型的服务应该与模型的表示分离
我还建议在学习jQuery时将AngularJS从项目中删除。这样你就能更快地进入安古拉杰-禅宗状态！
Stack Overflow用户
发布于 2013-02-11 09:31:30
我相信，角质化的方式是尽可能少地用手操纵。即使你不得不操纵它，也只能在指令范围内操作。
因此，与jQuery不同的是，方法是拥有一个模型并使用绑定来更改您的dom。
因此，我会选择的方式-它有一些InformerController绑定在您的布局模板的某个地方，并迭代一个数组的当前通知，并直接绘制他们。
app.controller('InformersController', function($scope, InformerService) {
$scope.informs = InformerService.get();
$scope.close = function (index) {
InformerService.close(index)
}
});在你的模板中：
<div ng-controller="InformersController">
<div ng-repeat="inform in informs">
<div class="alert {{inform.alertClass}} fade in informer">
<button type="button" ng-click="close($index)" class="close">×</button>
<div class="valignCenterWrapper">
<div class="valignCenter">
{{inform.message}}
</div>
</div>
</div>
</div>
</div>如果需要显示来自任何地方的警告，请使用它向控制器注入InformerService，并使用它添加数据。
app.service('InformerService', function () {
var informs = [];
this.get = function () {
return informs;
};
this.inform = function (message, type) {
informs.push({
alertClass: 'alert-' + type,
message: message
});
}
this.close = function (index) {
informs.splice(index, 1);
}
});例如：
app.controller('SomeController', function($scope, InformerService) {
$scope.doError = function (msg, type) {
InformerService.inform(msg, type);
};
});在你的模板中：
<div class="well" ng-controller="SomeController">
<button class="btn btn-danger" ng-click="doError('Hello', 'error')">Error</button>
<button class="btn btn-info" ng-click="doError('Hello', 'info')">Info</button>
</div>你可以在这把小提琴上看到这一切：http://jsfiddle.net/zc3YH/6/
https://stackoverflow.com/questions/14802584
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号