我正在努力寻找正确的方法来使用 Angular-Strap 模态/除了 Controller 。
是的，调用代码可以注入(inject) $scope ，使其可用于模态。但这也有问题。
myModal = $modal({
scope: $scope,
template: 'template.html',
show: false,
backdrop: "static",
keyboard: false,
persist: true
});
这将污染调用 Controller 的潜在模式方法和属性。
我通常使用“controllerAs”，因此甚至没有
$scope首先注入(inject)模态!您可以创建一个新的
$scope然后将方法插入其中，但同样需要注入(inject) $scope进入父 Controller 。坏坏坏。如果我使用
ng-controller在模态模板中，我可以拥有我的 Controller 。但是他给了我另一个问题:现在我无法将数据注入(inject)模态 Controller ，并且我的调用代码无法知道模态何时关闭并且从模态返回数据也成为一件苦差事(涉及一个工厂只是为了保持父子 Controller 数据同步)。我真的很努力如何使它成为最好的方法。
有任何想法吗？
干杯
更新
这就是我现在的做法:
在我的模板中，我创建了一个打开模式的指令。
例子:
<my-modal
on-update="ctrl.OnDialogUpdate">
</my-modal>
所以基本上指令调用我的模态，当模态关闭或想要返回结果时，它调用指令参数中指定的方法。
这就是指令的外观:
(function() {
'use strict';
angular.module('app').directive('myModal',myModal);
function myModal(){
return {
restrict: 'E',
// The modal callback specified in the directive tag
scope: {
onUpdate: '&?'
},
replace: true,
// This is the template for the directive, not the modal
templateUrl: 'button.html',
controllerAs: 'ctrl',
bindToController: true,
compile: function (element, attrs) {
return function (scope, element, attrs) {
};
},
/*@ngInject*/
controller: function($scope, $log, $aside){
var self = this;
var myDialog = $aside({
// Dialog template
template: 'my-modal.template.html',
show: false,
animation: 'am-fade-and-slide-right',
placement: 'right',
backdrop: true,
html: true,
container: '',
scope: $scope
});
// Opens modal
self.ShowDialog = function(){
myDialog.$promise.then(function() {
myDialog.show();
})
};
// Expose Update() method to the dialog template
$scope.Update = function(){
if(angular.isFunction(self.onUpdate) ) {
self.onUpdate()();
}
}
}
}
}
})();
最佳答案
只需使用“ Controller ”选项:
$scope.showModal = function() {
$modal({
title: 'My Title',
content: 'My Content',
show: true,
controller: 'ModalCtrl'
});
};
Here's a plnkr
关于angularjs - 如何使用 Angular-Strap 创建带有 Controller 的模态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29098741/