最优雅的方式
我有这个AngularJS应用程序。 一切正常。
现在我需要在特定条件成立时显示不同的弹出窗口,并且我想知道最佳的处理方式是什么。
目前我正在评估两个选项,但我完全接受其他选项。
选项1
我可以为弹出窗口创建新的HTML元素,并直接从控制器追加到DOM。
这将打破MVC设计模式。 我对这个解决方案不满意。
选项2
我总是可以在静态HTML文件中插入所有弹出窗口的代码。 然后,使用ngShow
,我可以隐藏/只显示正确的弹出窗口。
这个选项不是真正可扩展的。
所以我很确定必须有更好的方法来实现我想要的。
基于我迄今为止使用AngularJS模块的经验,我认为最优雅的方法是一种专用服务,我们可以提供一个部分(HTML)模板以模态显示。
当我们考虑它时,模态是一种AngularJS路线,但只是在模态弹出窗口中显示。
AngularUI引导项目(http://angular-ui.github.com/bootstrap/)有一个很好的$modal
服务(以前称为$对话框,在版本0.6.0之前),它是一个服务的实现来显示partial的内容作为模式弹出。
这很有趣,因为我正在学习Angular,并在Youtube上观看他们频道上的一些视频。 演讲者在28:30分钟左右的视频https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681中提到了确切的问题。
它归结为将一段特定的代码放在服务中而不是控制器中。
我的猜测是将新的弹出式元素注入到DOM中,并单独处理它们,而不是显示和隐藏相同的元素。 这样你可以有多个弹出窗口。
整个视频也非常有趣,以及观看:-)
编辑添加高级示例(非功能)
<div id='popup1-content' popup='showPopup1'>
....
....
</div>
<div id='popup2-content' popup='showPopup2'>
....
....
</div>
.directive('popup', function() {
var p = {
link : function(scope, iElement, iAttrs){
//code to wrap the div (iElement) with a abs pos div (parentDiv)
// code to add a mask layer div behind
// if the parent is already there, then skip adding it again.
//use jquery ui to make it dragable etc.
scope.watch(showPopup, function(newVal, oldVal){
if(newVal === true){
$(parentDiv).show();
}
else{
$(parentDiv).hide();
}
});
}
}
return p;
});
链接地址: http://www.djcxy.com/p/88173.html
下一篇: What is the best way to conditionally apply attributes in AngularJS?