我有一个加载div,我想在几个控制器之间共享。有没有一种方法可以实现这一点,而不把这个模板放在每个其他模板?
例如:<div ng-show="loading" class="loading">Loading</div>
现在在控制器中,我将其关闭并使用$scope.loading = true/false.
在我的主页,我使用如下:
<div class="container" ng-app="myApp">
<div ng-view>
</div>
</div>
我正在使用路由,所以现在我必须在每个被路由器调用的模板中放置加载div,所以它被插入到ng-view中。我想要的只是一个加载div的位置。我该怎么做呢?
将加载div设置为自定义指令,查看angularjs文档中的示例:
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
http://plnkr.co/edit/?p =预览
有很多方法可以做到这一点。
我想到的是使用一个服务来注册一个AppController回调。然后在每个页面的控制器中注入该服务,并使用true/false调用回调。
完整的代码如下,但主要关注的是:
myApp.service('LoadingService', function() {
var controllerCallback = function() {};
this.setControllerCallback = function(callback) {
controllerCallback = callback;
};
this.setLoading = function(bool) {
controllerCallback(bool);
};
});
在你的AppController中:
LoadingService.setControllerCallback(function(bool) {
$scope.loading = bool;
});
然后要显示正在加载的div,只需将该服务注入控制器并调用
LoadingService.setLoading(true) //or false
这允许服务在任何需要切换加载div的控制器中被重用。
// Code goes here
var myApp = angular.module('app', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/page1', {
templateUrl: 'page1.html',
controller: 'PageOneController'
})
.when('/page2', {
templateUrl: 'page2.html',
controller: 'PageTwoController'
})
});
myApp.controller('AppController', function($scope, LoadingService) {
$scope.loading = false;
LoadingService.setControllerCallback(function(bool) {
$scope.loading = bool;
});
});
myApp.controller('PageOneController', function($timeout, LoadingService) {
LoadingService.setLoading(true);
$timeout(function() {
LoadingService.setLoading(false);
}, 2000);
});
myApp.controller('PageTwoController', function($timeout, LoadingService) {
LoadingService.setLoading(true);
$timeout(function() {
LoadingService.setLoading(false);
}, 3000);
});
myApp.service('LoadingService', function() {
var controllerCallback = function() {};
this.setControllerCallback = function(callback) {
controllerCallback = callback;
};
this.setLoading = function(bool) {
controllerCallback(bool);
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body ng-controller="AppController">
<h1>Title</h1>
<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<div ng-if="loading">Loading...</div>
<div ng-view></div>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
<script type="text/ng-template" id="page1.html">
<div>You're on page one</div>
</script>
<script type="text/ng-template" id="page2.html">
<div>You're on page two</div>
</script>
</body>
</html>