[英]Can't pass a parameter to my ui Modal with AngularJS
In my angularJS app, I'm trying to pass a parameter to a modal popup so that when the Modal link is click, a name is displayed in the popup. 在我的angularJS应用中,我试图将参数传递给模式弹出窗口,以便在单击“模式”链接时,在弹出窗口中显示一个名称。 The modal link is coming from a custom directive which is getting the list on names from an external service.
模态链接来自一个自定义指令,该指令从外部服务获取名称列表。
I've tried following this tutorial to Create an Angularjs Popup Using Bootstrap UI along with the documentation for $uibModal as that tutorial is a bit outdated. 我已经尝试过按照本教程使用Bootstrap UI创建Angularjs弹出窗口以及$ uibModal的文档,因为该教程有些过时了。
I can get the modal PopUp and controller working but I can't pass a parameter to it. 我可以使模式PopUp和控制器正常工作,但无法将参数传递给它。
I replicated the issue on Plunker . 我在Plunker上重复了这个问题。
This problem is I can't get the titlename
param passed to the popupController
from the listings
directive (see script.js in Plunker ). 这个问题是我不能让
titlename
传递给帕拉姆popupController
从listings
指令(见的script.js在Plunker )。 I don't think I have the resolve set up correctly. 我认为我的解决方法设置不正确。 With the debugger set in Chrome I can see the
titlename
value up to this point. 通过在Chrome中设置调试器,我可以看到
titlename
值。
app.directive('listings', [function(){
return {
restrict: 'E',
...
controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
$scope.open = function (titlename) {
var uibModalInstance = $uibModal.open({
templateUrl: 'popup.html',
controller: 'popupController',
titlename: titlename,
resolve: {
item: function(){
return titlename;
}
}
});
}
}]
};
}]);
But it doesn't get passed to the popupController
. 但是它不会传递给
popupController
。 In the below code the titlename
has value undefined
在下面的代码中,
titlename
值undefined
app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance, titlename) {
$scope.title1 = titlename;
$scope.close = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
Any idea why this is happening and how I can fix it? 知道为什么会这样以及如何解决吗? Is this the correct way to use
resolve
in AngularJS? 这是在AngularJS中使用
resolve
的正确方法吗?
First, you want to pass item.name
, not the literal string '{{item.name}}'
to your open
method so change your template to 首先,您希望将
item.name
而不是文字字符串'{{item.name}}'
传递给open
方法,因此请将模板更改为
ng-click="open(item.name)"
Second, your resolved property is named item
but you seem to be expecting titlename
so change it to 其次,您的解析属性被命名为
item
但是您似乎期望titlename
因此将其更改为
resolve: {
titlename: function() {
return titlename;
}
}
And finally, you don't have an injection annotation for titlename
in your controller so you need to add it 最后,您的控制器中没有
titlename
的注入注释,因此您需要添加它
app.controller('popupController', ['$scope','$uibModalInstance', 'titlename',
function ($scope,$uibModalInstance, titlename) {
// ...
}])
Fixed Plunker ~ http://plnkr.co/edit/ee7Psz2jXbVSkD0mfhS9?p=preview 固定Plunker〜http://plnkr.co/edit/ee7Psz2jXbVSkD0mfhS9? p= preview
You don't need a double brace when using ng-click
. 使用
ng-click
时不需要大括号。 See this post for more information on using the double curly braces. 见这个职位的详细信息,使用双花括号。 So your listings directive should be something like this.
因此,您的Listings指令应该是这样的。 You were passing the actual string
'{{item.name}}'
您正在传递实际的字符串
'{{item.name}}'
<a href="#" ng-click="open(item.name)">{{item.name}} -Popup</a>
Then in your popupController
, you were not passing the resolved item
value. 然后在
popupController
,您没有传递已解析的item
值。 The controller should read: 控制器应读取:
app.controller('popupController', ['$scope','$uibModalInstance', 'item', function ($scope,$uibModalInstance, titlename) {
First, in your listingsDirective.html
, don't use curly brackets to pass in variables. 首先,在您的
listingsDirective.html
,请勿使用大括号来传递变量。 Also, by adding titlename1
to the directive $scope
and sharing that parent scope with the child modal, you can access the variables in your modal. 另外,通过将
titlename1
添加到指令$scope
并与子模式共享该父作用域,您可以访问模式中的变量。
app.directive('listings', [function(){
return {
restrict: 'E',
scope: {
data:'=',
},
templateUrl: 'listingsDirective.html',
replace: true,
controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
$scope.open = function (titlename) {
$scope.titlename = titlename;
var uibModalInstance = $uibModal.open({
templateUrl: 'popup.html',
controller: 'popupController',
scope: $scope,
resolve: {
item: function(){
return $scope.titlename;
}
}
});
}
}]
};
}]);
app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance) {
$scope.title1 = $scope.titlename;
$scope.close = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
New Plunkr: http://plnkr.co/edit/RrzhGCLuBYniGGWvRYI9?p=preview 新的Plunkr: http ://plnkr.co/edit/RrzhGCLuBYniGGWvRYI9?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.