AngularJS Controllers

AngularJS Controllers

本文关键字：Controllers AngularJS      更新时间：2023-09-26

我有使用UIrouter的嵌套视图。下面是我现在拥有的代码，它不起作用。我想知道哪里出了问题。

app.js

angular.module('Myapp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
.state('main', {
          url: '/main',
          templateUrl: 'main.html',
      })
  .state('main.submit', {
      url: '/submit',
      templateUrl: '/main-submit.html',
      controller: 'MyController'
  });
angular.module('Myapp')
.controller('MyController', function ($scope, $http) {  
$scope.click = function () {
     $http.get("URL")
     .success(function (response) {
      $scope.condition = response.Data            
  }};

main.html：

<div ng-controller="MyController">
<a ui-sref=".submit" class="btn btn-primary" ng-click="click()">Submit</a></div>
<ui-view></ui-view>

main-submit.html：

        {{condition}}

这是否是在嵌套视图中调用函数的正确方法？？如果有人能帮忙，我将不胜感激。

我已经根据您的要求编写了工作示例，请尝试

index.html:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
        <script>
            angular.module('Myapp', ['ui.router'])
                .config(function ($stateProvider, $urlRouterProvider) {
                    $urlRouterProvider.otherwise('/main');
                    $stateProvider
                        .state('main', {
                            url: '/main',
                            templateUrl: 'main.html'
                        })
                        .state('main.submit', {
                            url: '/submit',
                            templateUrl: 'main-submit.html',
                            controller: 'MyController'
                        });
                })
                .controller('MyController', function ($scope, $http) {  
                    $scope.click = function () {
                        $scope.condition = 'Condition!!!!!!!!';
                    };
                });
        </script>
    </head>
    <body ng-app="Myapp">
        <div ui-view></div>
    </body>
</html>

main.html：

Home Page YaHoo!!!!!!
<div ng-controller="MyController">
    <a ui-sref=".submit" class="btn btn-primary" ng-click="click()">Submit</a>
    <div ui-view></div>
</div>

main-submit.html：

{{condition}}

我希望它能解决你的问题。

干杯！！！

您是否想过删除html.submit的控制器分配
你已经用同一个控制器包装了你的模板，即处理这两种状态。

由于只有一个控制器，所以代码很好。我想你可能已经注意到了angular.module（"yapp"）。这应该是angular.mode（"Myapp"）。

当您向父状态再声明一个控制器时，就会发生更棘手的事情。您可以从子控制器访问父控制器中的所有功能。但是父控制器不能访问子控制器中声明的函数或变量。

不要使用ng-click，而是在state()方法定义中使用resolve参数来获取数据。

你的控制器看起来像这样：

app.controller('MyCtrl', function($scope){
  $scope.submit = function(){
    //do processing logic
    $state.go('state1');
  };
});

你的州定义是这样的：

.state( 'state1', {
  url: '/state1',
  views: {
    "content": {
    templateUrl: 'pages/state1.html',
    controller: 'State1Ctrl',
    resolve: {
      state1Data: function(){return $http.get(/*whatever*/);}
    }
  }
  }
})
相关文章：