带有路由的angular.js中的共享模板
[英]Shared template in angular.js with routing
问题描述
I have a loading div that I'd like to share across several controllers. 
我有一个加载div，我想在多个控制器之间共享。 Is there a way to accomplish this without placing this template in every other template? 有没有一种方法可以在不将该模板放置在其他所有模板中的情况下完成此任务？
For example: 例如：
<div ng-show="loading" class="loading">Loading</div>
Now in my controller I turn this off and on my using $scope.loading = true/false. 现在，在我的控制器中，我使用$scope.loading = true/false.将其关闭并打开$scope.loading = true/false.
In my main page I use this: 在我的主页中，使用以下命令：
<div class="container" ng-app="myApp">
<div ng-view>
</div>
</div>
I'm using routing so, right now I have to place the loading div in each template that is called by the router so it is inserted in ng-view. 我正在使用路由，因此，现在我必须将加载div放置在路由器调用的每个模板中，以便将其插入ng-view中。 All I want is one location for the loading div. 我想要的只是加载div的一个位置。 How do I accomplish this? 我该如何完成？
2 个解决方案
解决方案1
0 2015-07-28 17:46:02
Set up the loading div as a custom directive, check out this example from the angularjs documentation: 将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}}'
};
});
解决方案2
0 2015-07-28 18:15:59
There's quite a few ways to do this. 有很多方法可以做到这一点。
What I've come up with is to use a service to register an AppController callback. 我想到的是使用服务来注册AppController回调。 Then in each of my page's controllers I inject that service, and call the callback with true/false. 然后在页面的每个控制器中注入该服务，并使用true / false调用回调。
The full code is below, but the main lines to focus on is: 完整的代码如下，但是要关注的主要内容是：
myApp.service('LoadingService', function() {
var controllerCallback = function() {};
this.setControllerCallback = function(callback) {
controllerCallback = callback;
};
this.setLoading = function(bool) {
controllerCallback(bool);
};
});
And in your AppController: 在您的AppController中：
LoadingService.setControllerCallback(function(bool) {
$scope.loading = bool;
});
Then to show the loading div, just inject that service into a controller and call 然后要显示加载div，只需将该服务注入控制器并调用
LoadingService.setLoading(true) //or false
This allows for the service to be reused in any controller that needs to toggle the loading div. 这样就可以在需要切换加载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.