angularjs从指令调用模态对话框
我已经创建了一个打开模式对话框的指令。代码如下: [编辑]JSFIDDLE此处: 问题:关闭按钮不能关闭模式angularjs从指令调用模态对话框,angularjs,angularjs-directive,angular-ui-bootstrap,Angularjs,Angularjs Directive,Angular Ui Bootstrap,我已经创建了一个打开模式对话框的指令。代码如下: [编辑]JSFIDDLE此处: 问题:关闭按钮不能关闭模式 angular.module('person.directives'). directive("person", function($dialog) { return { restrict: "E", templateUrl: "person/views/person.html", replace: true, scope: { myPer
angular.module('person.directives').
directive("person", function($dialog) {
return {
restrict: "E",
templateUrl: "person/views/person.html",
replace: true,
scope: {
myPerson: '='
},
link: function (scope, element, attrs) {
},
controller: function ($scope)
{
$scope.opts = {
backdrop: true,
keyboard: true,
backdropClick: true,
templateUrl: 'person/views/searchPerson.html'
};
$scope.openDialog = function () {
var d = $dialog.dialog($scope.opts);
d.open().then(function (result) {
if (result) {
alert('dialog closed with result: ' + result);
}
});
}
}
}
}))
那很好。现在,在对话框中,我使用另一个指令:
<search-person></search-person>
而js:
angular.module('person.directives').directive("searchPerson", function ($dialog) {
return {
restrict: "E",
template: "<div>some template</div>",
scope: {},
link: function (scope, element, attrs) {
},
controller: function ($scope)
{
$scope.close = function (result)
{
$dialog.close(result);
}
}
}
});
angular.module('person.directions')。指令(“searchPerson”,函数($dialog){
返回{
限制:“E”,
模板:“一些模板”,
作用域:{},
链接:函数(范围、元素、属性){
},
控制器:功能($scope)
{
$scope.close=函数(结果)
{
$dialog.close(结果);
}
}
}
});
但是$dialog.close(结果)不起任何作用。我注意到$scope.close为空。
我怀疑这和注射有关。我正在将$dialog注入searchPerson指令,而我想我应该使用从person指令打开的对话框。我只是不知道。。。有什么想法吗
[编辑2]
我已经将模态的模板替换为和指令searchPerson的模板。现在我没有范围问题(请参阅更新的JSFIDLE)。但是“关闭”按钮仍然不起作用!错误是:
Object #<Object> has no method 'close'
Object#没有方法“close”
似乎$dialog在searchPerson指令中没有正确插入 我认为函数参数中的$dialog是$dialog服务,而不是dialog对象的实例。这就是为什么没有close方法。@Joe,实际上它是dialog对象,而不是$dialog服务。在本例中,$dialog服务的open()方法向分配的控制器中注入对对话框的引用
经过大量的修改,我最终解决了这个问题,将整个模式移动到searchPerson指令本身。它们共享同一个控制器,这很好。我也有类似的需求,所以我只是将对话框的控制器(我称之为“dialogController”)插入到$scope.opts对象中。 像这样:
.directive('infoDialog', function($dialog) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
elm.bind('click', function() {
scope.$apply(function() {
var info = { title: attrs.title, content: attrs.content };
scope.openDialog(info);
});
})
},
controller: function($scope) {
var dialogController = function($scope, dialog, info) {
$scope.close = function(){ dialog.close(); };
if(info){ $scope.info = info; }
};
$scope.opts = {
backdrop: true,
keyboard: false,
backdropClick: true,
backdropFade: false,
resolve: { },
controller: dialogController,
templateUrl: 'partials/dialogs/blank.html'
};
$scope.openDialog = function (info) {
$scope.opts.resolve.info = function(){ return info; };
var d = $dialog.dialog($scope.opts);
d.open();
}
}
};
});
@Sam,我知道你已经解决了这个问题,但是这段代码可能对其他人有用。什么是$dialog你能发布一个fiddle$dialog吗?它来自ui引导程序,是angularjs的扩展。它是内置的。该部分在person指令中运行良好。贴小提琴不容易,我会看看我能做什么,我已经弄明白了。关闭按钮实际上不在searchPerson指令模板中。它位于模式模板中,其中包含searchPerson指令。因此,searchPerson指令和close按钮不属于同一范围。问:我如何处理searchPerson指令中的点击按钮???我刚刚更改了JSFIDLE,所以我将一个控制器传递给ui dialog指令。但是没有运气,它不会改变任何东西……(你试过$discover吗?替换它有点旧,但是你能告诉我们你是如何做到的吗?小提琴?