Question

我有ui-router的以下嵌套状态

的index.html

<body ng-app="testApp">
  <div ui-view></div>
<body>

view.homepage.html

<div id="header" ng-controller="controllerHome">
  <div id="middle">
    <div ui-view>
     <input type="text" ng-model="check">
     <button ng-click="test()">Click</button>
    </div>
  </div
</div>

这是我的州定义js文件

var testApp = angular.module('testApp',['ui.router']);

testApp.config(function($stateProvider, $urlRouterProvider){

    $urlRouterProvider.
        otherwise('/');

    $stateProvider
        .state('home',
            {
                url:'/',
                templateUrl : './templates/view.homepage.html',
                controller : 'controllerHome',
                resolve : {
                    userSession : function($http){
                     return $http({
                            method : "POST",
                            url : '/getSession'
                        });
                    }
                }
            })
})

homeController.js

testApp.controller('controllerHome',function($scope,$http,userSession){

    $scope.check = "";
    $scope.test = function(){
      console.log($scope.check);
    }

})

当我将解析I置于状态定义中时，我收到以下错误错误：$ injector：unpr未知提供程序。

所以我尝试删除ng-controller指令，但是当我从视图中删除ng-controller指令时，在单击按钮后，controllerHome中$ scope.check的值为空。

我想从html视图中删除ng-controller指令，并将解析放在状态定义中。

Answer 1

根据Documentation，UI-Router中的Resolve属性以这种方式工作。

在激活该状态之前，将检索已解决的属性。

resolve：block是状态定义上的对象。每把钥匙都是要加载的一些数据的名称，每个值都是一个返回的函数对数据的承诺。使用Angular注入Resolve函数喷射器。

通过解析中的属性，解析这些属性和相应的函数，并将promises注入到状态的控制器中。

因此必须才能在状态中拥有控制器名称，而不是将其作为 ng-controller 包含在HTML中。

您遇到的问题是使用工厂 sessionService 解决，该工厂具有会话详细信息并通过调用该服务中的方法返回它们。

看看下面的

您的配置必须包含以下状态

.state('home',
    {
        url:'/',
        templateUrl : './templates/view.homepage.html',
        controller : 'controllerHome',
        resolve : {
            userSession : function(sessionService){
               return : sessionService.getUserSession();
            }
        }

创建一个名为sessionService的工厂，如下所示

testApp.factory('sessionService', function() {
    var getUserSession= function(){
            $http({
                    method : "POST",
                    url : '/getSession'
            });
    }
    return {
            getUserSession:getUserSession
    }
});

尝试在控制器的控制台中显示会话值可以修改为

testApp.controller('controllerHome',function($scope,$http,userSession){

    $scope.check = "";
    console.log(userSession);
    $scope.test = function(){
      console.log($scope.check);
    }
})

当ng-controller放入html视图时，Angular ui.router解析不起作用

1 个答案: