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

【问题标题】：Angular ui.router resolve not working when ng-controller put in html view当 ng-controller 放入 html 视图时，Angular ui.router 解析不起作用
【发布时间】：2017-04-07 01:34:37
【问题描述】：

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 放入状态定义中时，我收到以下错误 Error: $injector:unpr Unknown Provider.

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

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

【问题讨论】：

不要将子元素添加到 ui-view

标签： angularjs angular-ui-router

【解决方案1】：

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

将在激活该状态之前检索解析中的属性。

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

通过你在resolve中的属性，这些属性和相应的函数被解析并且promise被注入到状态的控制器中。

因此强制在状态中有一个控制器名称，而不是在 HTML 中作为 ng-controller。

您面临的问题是使用具有会话详细信息的工厂 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);
    }
})

【讨论】：