AngularJS UI Bootstrap 模式无法从范围执行功能 [英] AngularJS UI Bootstrap modal is unable to perform functions from scope
问题描述
在我的 angularjs 应用程序中,我使用 UI Bootstrap 来创建模态.我将范围和自定义控制器传递到模态中,它显示了来自原始范围的数据,但无法执行其任何功能.我有主控制器:
In my angularjs app I use UI Bootstrap for creating modals. I pass scope and custom controller into the modal, it shows my data from original scope but cannot perform any of its function. I have main controller:
myapp.controller('WsCtrl', function WsCtrl($scope, $location, todoStorage, filterFilter, $modal, $log) {
在控制器中我有下一个:
In controller I have next:
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'partials/users.html',
scope: $scope,
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
},
users: function(){
return $scope.users;
},
CurrentDate: function(){
return $scope.CurrentDate;
}
}
});
modalInstance.result.then(function (selectedItem) {
console.log(selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
而且我在控制器之外还有另一个功能:
And also I have another function outside the controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.users = users;
$scope.CurrentDate = CurrentDate;
$scope.selected = {
item: $scope.items[0]
};
$scope.num = 11;
$scope.ok = function () {
$modalInstance.close($scope);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
当我将作用域传递给 modal 时 - 我可以看到我的所有用户,但我无法添加一个导致我原始作用域中的函数出现问题".
When I pass the scope to modal - I can see all my users, but I can't add one 'cause off problem with functions in my original scope.
推荐答案
您不需要 scope: $scope
.resolve
参数负责将变量传递给 ModalInstanceCtrl.但是您必须将这些参数添加到其依赖项中(它们的名称必须与 resolve
中的名称匹配),因此如果您有:
You don't need scope: $scope
. The resolve
parameter is responsible for passing variables to ModalInstanceCtrl. But you must add those parameters to its dependencies (their names must match those from resolve
), so if you had:
resolve: {
foo: function(){
return $scope.something
}
}
那你一定有
var ModalInstanceCtrl = function ($scope, $modalInstance, foo) {
$scope.foo = foo;
// ...
}
哦,函数可以像其他变量一样传递,在resolve
中:
Oh, and functions can be passed just like other variables, inside resolve
:
resolve: {
someFunction: function(){
return $scope.someFunctionFromOriginalScope
}
}
此外,您可以在 resolve
部分注入任何其他服务并在其中执行其他逻辑:
Additionally, you can inject any other service in the resolve
section and perform additional logic inside of it:
resolve: {
someFunction: function(configService){
if (configService.isProduction){
return angular.noop;
} else {
return $scope.someFunctionFromOriginalScope;
}
}
}
这篇关于AngularJS UI Bootstrap 模式无法从范围执行功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!