如何从AngularJS中的另一个Controller调用ui-view
这是我的示例程序。实际上在这里我使用的是嵌套的ui-view。问题是当我点击提交时 按钮最初它工作正常并在SampleController中显示警报
但是我再次点击它而不刷新页面它不会去SampleController,为什么?
当我点击提交按钮
时,我需要转到该控制器我的代码是否有任何错误。请检查我的stateProvider。我是AngularJS的新手
请认真对待我谢谢......
var app=angular.module('TestApp', ['angular.filter','ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('category', {
views : {
"body" : {
url : '/category',
templateUrl : 'category.html',
controller : 'TestController'
}
}
})
.state('category.subcategory', {
url : '/subcategory',
views : {
"subbody@category" : {
templateUrl : 'sample.html',
controller : 'SampleController'
}
}
})
});
app.controller('MainController', MainController);
function MainController($scope,$state) {
alert("This is MainController")
$scope.getCategory=function(){
$state.go('category');
}
}
app.controller('TestController', TestController);
function TestController($scope, $state){
$scope.getData=function() {
alert("Call to Sample Controller")
$state.go('.subcategory');
}
}
app.controller('SampleController', SampleController);
function SampleController($scope,$state) {
alert("This is SampleController")
}
这是我的示例HTML文件
的index.html
<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<link rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script src="angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<a href="#" ng-click="getCategory()">Click to Category</a>
<div ui-view="body">
<div ui-view="subbody"></div>
</div>
</body>
</html>
category.html
<div>
<input type="button" name="button" id="button" value="Submit" ng-click="getData()" />
<div ui-view="subbody"></div>
</div>
sample.html
<div>
Sample Controller
</div>
当我点击提交按钮
时,我需要点击SampleController在我的项目中,提交按钮部分包含两个选择框类别和子类别。基于该catgeory 和子类我需要在SampleController上显示细节。仅仅通过SampleController完成刷新。
答案 0 :(得分:0)
首先,确认浏览器地址栏中的'localhost / category / subcategory'正在运行,然后使用$ state.go('category.subcategory')。
答案 1 :(得分:0)
问题是你的观点没有正确嵌套,你的声明有点不对,这里是working plnkr。
首先,您忘了将subbody
ui-view放在category.html
模板中:
<div ui-view="subbody"></div>
由于category.subcategory
是category
的子状态,因此您不必在视图声明中使用@