尝试对通用模板使用可重用的控制器
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>
来自我的views对象的代码段$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个隔离的作用域？我是否必须使用指令？
您的方案应该可以工作（不确定这是否是好的设计）。有一个工作的家伙
但是我们必须将开关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;
}])
然后，每个视图都独立于其自己的controller和$ scope实例
在这里检查
然后我们可以看到这样的结果
范围内的象限随机数：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>
所有严格遵循文档的内容：
以上内容的工作示例
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句