2016-03-03 34 views
1

如何從AngularJS的另一個控制器調用ui-view

這是我的示例程序。其實在這裏我使用嵌套的ui-view。問題是,當我點擊提交按鈕,最初它工作正常,並顯示一個提示SampleController

但我再次點擊它沒有得到SampleController爲什麼?

我需要去該控制器當我點擊提交按鈕

是它在我的code.Please任何錯誤檢查我stateProvider too.I我在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 : {        
      "[email protected]" : { 
       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> 
    </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當我點擊提交按鈕

+0

這條線應該是$ state.go( 'category.subcategory');你必須通過整個州名 –

+0

@adeel_s是的,我改變了,但它只會在最初再次工作,我改變我的子類別它不會工作 –

+0

那是因爲你沒有給它任何stateParams。你的類別是否有ID?那麼你可以做類似.state('category.subcategory',{url:'/ subcategory /:id'。 –

回答

3

試試這個:

app.controller('TestController', TestController); 
    function TestController($scope, $state){  
    $scope.getData=function() { 
     alert("Call to Sample Controller") 
     $state.go('category.subcategory', null, {reload:true}); 
    } 
} 
+0

它也可以不用重新加載也可以工作 –

+0

@Nirmal Borkar Yeae它只會遵循Niraml Ji這就是問題了改變我的子類別,它不會工作,不刷新整個頁面 –

+0

@ojus kulkarni Yeae它只會在最初工作這就是問題再次我改變我的子類別它不會工作,無需刷新整個頁面 –