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

Question

Trying to use a reusable controller for a generic template

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>

code snippet from my views object in $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 code

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

}]);

It only seems to use the last controller being instantiated (catId = 4) how can I have 4 isolated scopes? Do I have to use directives instead?

Answer 1

Your scenario should work (not sure if this is good design) . There is a working plunker

But we have to move the switch catId from ng-init into state defintion. Into resolve

If the states are defined like this:

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

the child state with multi-views

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

And simplified controller creates random number in the scope

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

      $scope.catId = catId;

      console.log($scope.catId); 

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

}])

Each view is then independent with its own instance of controller and $scope

Check it here

Then we can see results like this

quadrant
random number in the scope: 32.40865177940577 catId: 1

quadrant
random number in the scope: 17.18798188958317 catId: 2

quadrant
random number in the scope: 76.22438217513263 catId: 3

quadrant
random number in the scope: 41.46456739399582 catId: 4

if the quadrant template is:

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

All that is strictly following the documentation:

Multiple Named Views

The working example with above stuff