Angular 从一个控制器调用模态打开功能到另一个
Angular Calling Modal Open function from one controller to another
我的 header 中有一个模态框 window,我的 header 中有一个点击事件 link 来打开和关闭模态框 Window。 ..这很好用。即
<div class="header" ng-controller="headerCtrl">
...
<li><a href ng-click="open()">Report an Issue</a></li>
...
</div>
然后是我的控制器
.controller('headerCtrl', ['$location', '$scope', '$log', '$modal', function ($location, $scope, $log, $modal) {
'use strict';
(function () {// init
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/help/supportModalContent.html',
controller: 'supportInstanceCtrl'
});
};
})();
}])
.controller('supportInstanceCtrl', ['$location', '$scope', '$log', '$modalInstance','$state', function ($location, $scope, $log, $modalInstance,$state) {
'use strict';
(function () {// init
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.isCollapsed = false;
$scope.message_sent = false;
})();
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.faq = function () {
$modalInstance.close('cancel');
$state.go('faq');
};
$scope.help = function () {
$modalInstance.close('cancel');
$state.go('help');
};
$scope.send = function () {
$scope.isCollapsed = true;
$scope.message_sent = true;
};
}])
问题现在出现在我的一个主要内容视图中,我现在在下面还有一个 link,上面写着一些内容,请单击此处寻求支持。我想再次打开相同的模式 window。所以我这样做了
.controller('noResultCtrl', ['$location','$scope','$log','search','$state','$modal',function ($location,$scope,$log,search,$state,$modal) {
'use strict';
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/help/supportModalContent.html',
controller: 'supportInstanceCtrl'
});
};
}])
它可以工作,但是有没有更好的方法而不是在每个控制器中放置相同的逻辑我想在 header 中调用相同的模态 Window?
app.service('modalProvider',['$modal', function ($modal){
this.openPopupModal= function() {
var modalInstance = $modal.open({
templateUrl: 'views/help/supportModalContent.html',
controller: 'supportInstanceCtrl'
});
}
在您的控制器中包含此服务,并调用 openPopupModal method.For 示例:
.controller('noResultCtrl', ['$location','$scope','$log','search','$state','modalProvider',function ($location,$scope,$log,search,$state,modalProvider) {
'use strict';
modalProvider.openPopupModal();
我的 header 中有一个模态框 window,我的 header 中有一个点击事件 link 来打开和关闭模态框 Window。 ..这很好用。即
<div class="header" ng-controller="headerCtrl">
...
<li><a href ng-click="open()">Report an Issue</a></li>
...
</div>
然后是我的控制器
.controller('headerCtrl', ['$location', '$scope', '$log', '$modal', function ($location, $scope, $log, $modal) {
'use strict';
(function () {// init
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/help/supportModalContent.html',
controller: 'supportInstanceCtrl'
});
};
})();
}])
.controller('supportInstanceCtrl', ['$location', '$scope', '$log', '$modalInstance','$state', function ($location, $scope, $log, $modalInstance,$state) {
'use strict';
(function () {// init
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.isCollapsed = false;
$scope.message_sent = false;
})();
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.faq = function () {
$modalInstance.close('cancel');
$state.go('faq');
};
$scope.help = function () {
$modalInstance.close('cancel');
$state.go('help');
};
$scope.send = function () {
$scope.isCollapsed = true;
$scope.message_sent = true;
};
}])
问题现在出现在我的一个主要内容视图中,我现在在下面还有一个 link,上面写着一些内容,请单击此处寻求支持。我想再次打开相同的模式 window。所以我这样做了
.controller('noResultCtrl', ['$location','$scope','$log','search','$state','$modal',function ($location,$scope,$log,search,$state,$modal) {
'use strict';
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'views/help/supportModalContent.html',
controller: 'supportInstanceCtrl'
});
};
}])
它可以工作,但是有没有更好的方法而不是在每个控制器中放置相同的逻辑我想在 header 中调用相同的模态 Window?
app.service('modalProvider',['$modal', function ($modal){
this.openPopupModal= function() {
var modalInstance = $modal.open({
templateUrl: 'views/help/supportModalContent.html',
controller: 'supportInstanceCtrl'
});
}
在您的控制器中包含此服务,并调用 openPopupModal method.For 示例:
.controller('noResultCtrl', ['$location','$scope','$log','search','$state','modalProvider',function ($location,$scope,$log,search,$state,modalProvider) {
'use strict';
modalProvider.openPopupModal();