alo*_*ser 34 angularjs angularjs-scope
以下angular.ui模态示例显示modalInstance调用a ModalIntanceCtrl,稍后将其创建为函数:
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
我有2个问题/问题:
文档建议以另一种方式创建控制器(由于缩小问题),例如:
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
但是如果我像这样创建控制器,我怎么能将它注入modalInstance？
loginCtrl,这是一个问题吗？我应该以某种方式继承loginCtrl或从ModalInstanceCtrl调用它吗？如果是的话 - 究竟是怎么回事？我很乐意为此提供指导和澄清.谢谢!
Cha*_*ani 31
您的问题不是很清楚,但如果您使用模块API声明控制器,那么您可以将控制器作为字符串提供给模态服务
myApp.controller('ModalInstanceCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
controller: 'ModalInstanceCtrl',
loginCtrl如果要在模态服务中使用它,也可以这样做.
Mik*_*t25 12
我为那些喜欢自己的人创造了这个傻瓜,他们喜欢看一个例子.它显示了如何在不污染全局命名空间的情况下创建模态.希望它是有帮助的.
根据下面的bummi评论编辑包含代码示例
的index.html
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"> </script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="appController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<span>Message:{{message}}</span>
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="showModal()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
app.js
angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
function($rootScope) {
this.data = {};
this.data.message = 'This is a message from a service';
this.data.items = ['item1', 'item2', 'item3'];
}
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
function($scope, $modalInstance, dataService) {
$scope.data = dataService.data;
$scope.message = dataService.data.message;
$scope.items = dataService.data.items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]).
controller('appController', ['$scope', '$modal', '$log', 'DataService',
function($scope, $modal, $log, dataService) {
$scope.data = dataService.data;
$scope.showModal = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'myModal'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
]);
| 归档时间： |
|
| 查看次数： |
54099 次 |
| 最近记录： |