javascript - How can I have multiple instances of one controller for multiple templates -

javascript - How can I have multiple instances of one controller for multiple templates -

trying utilize reusable controller 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 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 seems utilize lastly controller beingness instantiated (catid = 4) how can have 4 isolated scopes? have utilize directives instead?

your scenario should work (not sure if design). there working plunker

but have move switch catid ng-init state defintion. resolve

if states defined this:

// home $stateprovider .state('home', { url: '/home', templateurl: 'tpl.layout.html', controller : "rootcontroller", })

the kid state multi-views

.state('child', { parent: "home", url: '/child', templateurl: 'tpl.example.html', views : { 'firstquadrant@home': { templateurl: "tpl.quadrant.html", controller: "quadrantctrl", resolve: { catid : function(){ homecoming 1 } }, }, 'secondquadrant@home': { templateurl: "tpl.quadrant.html", controller: "quadrantctrl", resolve: { catid : function(){ homecoming 2 } }, }, 'thirdquadrant@home': { templateurl: "tpl.quadrant.html", controller: "quadrantctrl", resolve: { catid : function(){ homecoming 3 } }, }, 'fourthquadrant@home': { templateurl: "tpl.quadrant.html", controller: "quadrantctrl", resolve: { catid : function(){ homecoming 4 } }, } } })

and simplified controller creates random number in scope

.controller('quadrantctrl', ['$scope', '$rootscope', 'catid' , function ($scope, $rootscope, catid) { $scope.catid = catid; console.log($scope.catid); $scope.random = math.random() * 100; }])

each view independent own instance of controller , $scope

check here

then can see results this

quadrant random number in scope: 32.40865177940577 catid: 1

quadrant random number in scope: 17.18798188958317 catid: 2

quadrant random number in scope: 76.22438217513263 catid: 3

quadrant random number in scope: 41.46456739399582 catid: 4

if quadrant template is:

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

all strictly next documentation:

multiple named views

the working example above stuff

javascript angularjs angular-ui-router