带路由的angular.js共享模板

Shared template in angular.js with routing

本文关键字：共享 js angular 路由      更新时间：2023-09-26

我有一个加载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>

相关文章：