$state.go无法正常工作AngularJS

如何在 AngularJS 中从另一个控制器调用 ui-view

这是我的示例程序。实际上在这里我使用的是嵌套的 ui-view。问题是当我点击提交时按钮最初工作正常，并在 SampleController 中显示警报

但是我再次单击它而不刷新页面，它没有转到 SampleController 为什么？

当我单击提交按钮时，我需要转到该控制器

我的代码是否有任何错误。请检查它我的状态提供者也。我是 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 文件
索引.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>

类别.html

 <div>      
   <input type="button" name="button" id="button" value="Submit" ng-click="getData()" />
   <div ui-view="subbody"></div>
 </div>

样品.html

 <div>
    Sample Controller
</div>

我需要在单击提交按钮时点击样本控制器

在我的项目中，提交按钮部分包含两个选择框类别和子类别。基于该分类和子类别我需要显示仅由 SampleController 完成的刷新 SampleController.So 的详细信息。

问题是你的视图没有正确嵌套，你的声明有点错误，这是一个有效的 plnkr。

首先，您忘记将subbody ui-view放在category.html模板中：

<div ui-view="subbody"></div>

由于category.subcategory是category的子状态，因此您不必在视图声明中使用@

首先，确认浏览器地址栏中的"localhost/category/subcategory"正常工作，然后使用$state.go（'category.subcategory'）。

相关内容

最新更新

热门标签：