[英]Shared template in angular.js with routing
我有一个加载div,我想在多个控制器之间共享。 有没有一种方法可以在不将该模板放置在其他所有模板中的情况下完成此任务?
例如:
<div ng-show="loading" class="loading">Loading</div>
现在,在我的控制器中,我使用$scope.loading = true/false.
将其关闭并打开$scope.loading = true/false.
在我的主页中,使用以下命令:
<div class="container" ng-app="myApp">
<div ng-view>
</div>
</div>
我正在使用路由,因此,现在我必须将加载div放置在路由器调用的每个模板中,以便将其插入ng-view中。 我想要的只是加载div的一个位置。 我该如何完成?
将loading 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}}'
};
});
有很多方法可以做到这一点。
我想到的是使用服务来注册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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.