Question

尝试将可重用控制器用于通用模板

HTML

<div class="row col-lg-10 pull-right">

   <div ng-init="catId = 1" ui-view="firstQuadrant"></div>
   <div ng-init="catId = 2" ui-view="secondQuadrant"></div>

</div>

<div class="row col-lg-10 pull-right">

   <div ng-init="catId = 3" ui-view="thirdQuadrant"></div>
   <div ng-init="catId = 4" ui-view="fourthQuadrant"></div>

</div>

来自$stateProvider中的观看对象的

代码段：

views : {
    'firstQuadrant@home': {
      templateUrl: "../partials/quadrant/quadrant.html",
      controller: "QuadrantCtrl"
    },
    'secondQuadrant@home': {
      templateUrl: "../partials/quadrant/quadrant.html",
      controller: "QuadrantCtrl"
    },
    'thirdQuadrant@home': {
      templateUrl: "../partials/quadrant/quadrant.html",
      controller: "QuadrantCtrl"
    },

    'fourthQuadrant@home': {
      templateUrl: "../partials/quadrant/quadrant.html",
      controller: "QuadrantCtrl"
    }
}

控制器代码

.controller('QuadrantCtrl', ['$scope', '$rootScope', 'categories', 'utils', 
   function ($scope, $rootScope, categories, utils) {

  $scope.$watch('catId', function () {
      console($scope.catId); 
      $scope.categories = categories;
      $scope.name = "It works! weee";
      $scope.score = 99;
      $scope.items = utils.findById($scope.categories, $scope.catId);
  });     

}]);

似乎只使用最后一个实例化的控制器（catId = 4）我怎么能有4个孤立的范围？我是否必须使用指令？

Answer 1

您的方案应该（不确定这是否是好的设计）。有一个working plunker

但是我们必须将开关 catId 从ng-init移到状态定义中。进入决心

如果状态定义如下：

// home
$stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'tpl.layout.html',
    controller : "rootController",
  })

具有多视图的子状态

  .state('child', {
    parent: "home",
    url: '/child',
    templateUrl: 'tpl.example.html',
    views : {
       'firstQuadrant@home': {
          templateUrl: "tpl.quadrant.html",
          controller: "QuadrantCtrl",
          resolve: { catId : function(){ return 1 } },
        },
        'secondQuadrant@home': {
          templateUrl: "tpl.quadrant.html",
          controller: "QuadrantCtrl",
          resolve: { catId : function(){ return 2 } },
        },

        'thirdQuadrant@home': {
          templateUrl: "tpl.quadrant.html",
          controller: "QuadrantCtrl",
          resolve: { catId : function(){ return 3 } },
        },

        'fourthQuadrant@home': {
          templateUrl: "tpl.quadrant.html",
          controller: "QuadrantCtrl",
          resolve: { catId : function(){ return 4 } },
        }
    }
  })

简化控制器在范围

中创建随机数

.controller('QuadrantCtrl', ['$scope', '$rootScope', 'catId' 
, function ($scope, $rootScope, catId) {

      $scope.catId = catId;

      console.log($scope.catId); 

      $scope.random = Math.random() * 100;

}])

然后，每个视图都独立于其自己的控制器实例和$ scope

检查here

然后我们可以看到这样的结果

<强>象限
随机数范围：32.40865177940577 catId：1

<强>象限
随机数范围：17.18798188958317 catId：2

<强>象限
随机数范围：76.22438217513263 catId：3

<强>象限
范围内的随机数：41.46456739399582 catId：4

如果象限模板是：

<h4>quadrant</h4>
<p>random number in the scope: {{random}}</p>
<p>catId: {{catId}}</p>

所有这些都严格遵循文档：

Multiple Named Views

working example以上内容

如何为多个模板提供一个控制器的多个实例

1 个答案:

Multiple Named Views