javascript - 如何为多个模板拥有一个 Controller 的多个实例

Question

尝试对通用模板使用可重用 Controller

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 中我的 View 对象的代码片段:

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 代码

.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);
  });     

}]);

它似乎只使用最后一个被实例化的 Controller (catId = 4) 我怎样才能拥有 4 个隔离示波器？我必须使用指令吗？

Answer 1

您的场景应该可行(不确定这是否是好的设计)。有一个 working plunker

但是我们必须将开关 catId 从 ng-init 移至状态定义。进入解析

如果状态定义如下:

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

具有多 View 的子状态

  .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 在范围内创建随机数

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

      $scope.catId = catId;

      console.log($scope.catId); 

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

}])

每个 View 都独立于它自己的 Controller 实例和 $scope

检查一下here

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

象限
范围内的随机数:32.40865177940577 猫ID:1

象限
范围内的随机数:17.18798188958317 猫ID:2

象限
范围内的随机数:76.22438217513263 猫ID:3

象限
范围内的随机数:41.46456739399582 猫ID:4

如果象限模板是:

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

所有内容都严格遵循文档:

Multiple Named Views

包含上述内容的 working example