Question

我的应用程序框架如下：

var app = angular.module('app', ['ngRoute']).config(function ($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl: 'sources/includes/home.html',
        controller : 'homeController'
    })
    .when('/about-us',{
        templateUrl: 'sources/includes/about-us.html',
        controller : 'aboutUsController'
    })
    .when('/catalog',{
        templateUrl: 'sources/includes/catalog.html',
        controller : 'catalogController'
    })
    .when('/sale',{
        templateUrl: 'sources/includes/sale.html',
        controller : 'saleController'
    })
    .when('/info',{
        templateUrl: 'sources/includes/info.html',
        controller : 'infoController'
    })
    .otherwise({ redirectTo: '/' });
  });

我需要创建一个整体控制器，为其所有视图设置相同的行为

我试过这样的事情：

var app = angular.module('app', ['ngRoute']).config(function ($routeProvider){
  $routeProvider
  .when('/',{
    templateUrl: 'sources/includes/home.html',
    controller : 'homeController'
  })
  .when('/about-us',{
    templateUrl: 'sources/includes/about-us.html',
    controller : 'aboutUsController'
    controller : 'overallController'
  })
  .when('/catalog',{
    templateUrl: 'sources/includes/catalog.html',
    controller : 'catalogController',
    controller : 'overallController'
  })
  .when('/sale',{
    templateUrl: 'sources/includes/sale.html',
    controller : 'saleController',
    controller : 'overallController'
  })
  .when('/info',{
    templateUrl: 'sources/includes/info.html',
    controller : 'infoController',
    controller : 'overallController'
  })
  .otherwise({ redirectTo: '/' });
  });

  // O V E R A L L  C O N T R O L L E R
  app.controller('overallController', function ($scope){

  });

任何想法如何为这四个视图设置相同的行为？

Answer 1

控制器是JS构造函数;你可以用mixins实现你想要的东西：

app.service("overallBehaviour", function() {

    var overallBehaviour = {};

    overallBehaviour.commonMethod = function() {
        ...
    };

    return overallBehaviour;
});

然后：

app.controller("aboutUsController", ["$scope", "overallBehaviour", function($scope, overallBehaviour) {
    angular.extend(this, overallBehaviour);
    // now this controller has access to overallBehaviour.commonMethod()

}]);

angular.extend(this,...)和angular.extend($scope, ...)之间的差异：

angular.extend(this,...)会将对象混合到控制器中;方法，例如，像往常一样，commonMethod()将在控制器中可用。除非涉及其他步骤，例如$scope（和视图），否则这些方法将不会可用。使用controllerAs语法。常用方法可供控制器使用。这些方法中的this将是控制器。
angular.extend($scope, ...)将使方法直接可用于范围（和视图）。方法中的this将是范围。

创建整体控制器

1 个答案: