Javascript 如何在没有引导的情况下正确处理AngularJS应用程序中的弹出窗口(modals)
我的应用程序中几乎没有弹出窗口。一个用于显示“关于”,第二个用于显示联系人表单。我现在做的是将整个弹出式DOM放入模板中,并编写如下自定义指令:Javascript 如何在没有引导的情况下正确处理AngularJS应用程序中的弹出窗口(modals),javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我的应用程序中几乎没有弹出窗口。一个用于显示“关于”,第二个用于显示联系人表单。我现在做的是将整个弹出式DOM放入模板中,并编写如下自定义指令: angular.module('app').directive('contactForm', function() { return { restrict: 'E', replace: true, scope: {}, templateUrl: 'contactForm.html', controller:
angular.module('app').directive('contactForm', function() {
return {
restrict: 'E',
replace: true,
scope: {},
templateUrl: 'contactForm.html',
controller: function($scope) {
$scope.submitForm = function() {
...
}
},
link: function(scope, el) {
scope.$on('openContactForm', function() {
el.show();
});
}
}
});
并在我的index.html中的某个地方调用这样的指令
<body>
<about-popup></about-popup>
<contact-form></contact-form>
...
...
</body>
我觉得这不是最好的处理方法,但我不知道如何做得更好。你有什么想法和例子吗?我做的上一个应用程序需要一个简单的模式来显示消息,我做的方式与你的指令非常相似 该指令附加模板并使用$rootScope存储模态对象,该对象具有属性show(由模板中的ng show使用)和每次需要显示/隐藏模态窗口时调用的切换函数。因为对象在$rootScope中,所以您可以在任何地方使用它 以下是该指令的简化版本
app.directive('myModal', ['$rootScope', function ($rootScope) {
return {
restric: 'A',
replace: true,
template: '<div class="modal" ng-show="modal.show">{{ modal.mainMessage }}<br /><button ng-click="modal.toggle()">Close</button></div>',
link: function (scope, elm, attrs) {
$rootScope.modal= {
mainMessage: '',
show: false,
toggle: function (mainMessage) {
this.mainMessage = mainMessage;
this.show = !this.show;
}
};
}
};
}]);
app.directive('myModal',['$rootScope',function($rootScope){
返回{
restric:“A”,
替换:正确,
模板:“{modal.mainMessage}}
关闭”,
链接:功能(范围、elm、属性){
$rootScope.modal={
主消息:“”,
秀:假,,
切换:功能(主消息){
this.mainMessage=mainMessage;
this.show=!this.show;
}
};
}
};
}]);
这是一本书
这是一个好问题,我很好奇它会得到什么答案 您可以使用
ng show
或ng hide
。
app.directive('myModal', ['$rootScope', function ($rootScope) {
return {
restric: 'A',
replace: true,
template: '<div class="modal" ng-show="modal.show">{{ modal.mainMessage }}<br /><button ng-click="modal.toggle()">Close</button></div>',
link: function (scope, elm, attrs) {
$rootScope.modal= {
mainMessage: '',
show: false,
toggle: function (mainMessage) {
this.mainMessage = mainMessage;
this.show = !this.show;
}
};
}
};
}]);