AngularJS无法在控制器上注入解析的对象答案

【问题标题】：AngularJS Can't inject resolved object on ControllerAngularJS无法在控制器上注入解析的对象
【发布时间】：2015-04-18 20:28:00
【问题描述】：

在我的代码中，我有一个状态和一个子状态

.state('tab.tab1', {
  url: '/tab1',
  views: {
    'tab-tab1': {
      templateUrl: 'templates/tab-tab1.html',
      controller: 'tab1Ctrl'
    }
  }

})

.state('tab.tab2', {
url: '/tab2/:objectId',
views: {
  'tab-tab1': {
    templateUrl: 'templates/tab-tab2.html',
    controller: 'tab2Ctrl',
    resolve: {
        resolvedObject: function(){
          return 'this is a test'; 
        }
    }
  }
}

})

在子状态中我想解析一个对象，但该对象从未注入到控制器上。

.controller('tab2Ctrl', function($scope, resolvedObject){
   alert(JSON.stringify(resolvedObject)); 
 })

那么，我做错了什么？提前致谢！

【问题讨论】：

我相信resolve函数只能返回对象，不能返回原语。试试return {value: 'this is a test'}; 和resolvedObject.value

标签： angularjs html angular-ui-router

【解决方案1】：

resolve 属性是一个地图对象。地图对象包含以下键/值对：

key – {string}：要注入控制器的依赖项的名称。工厂 - {字符串|函数}：如果是字符串，那么它是服务的别名。否则，如果是函数，则将其注入并将返回值视为依赖项。如果结果是一个承诺，它会在控制器被实例化之前被解析，并且它的值被注入到控制器中。 https://github.com/angular-ui/ui-router/wiki

【讨论】：

【解决方案2】：

你的方法是正确的。您的所有期望都是有效的，代码原样应该可以工作。

我创建了 working examle here，使用您的代码几乎 1:1。它应该可以帮助您找到不同之处...

这些是状态：

    .state('tab', {
      url: "/tabs",
      templateUrl: 'tpl.tabs.html',
    })
    .state('tab.tab1', {
      url: '/tab1',
      views: {
        'tab-tab1': {
          templateUrl: 'tpl.html',
          controller: 'tab1Ctrl'
        }
      }
    })
  .state('tab.tab2', {
    url: '/tab2/:objectId',
    views: {
      'tab-tab1': {
        templateUrl: 'tpl.html',
        controller: 'tab2Ctrl',
        resolve: {
          resolvedObject: ['$stateParams', function($stateParams) {
            return 'this is a test for objectId: ' + $stateParams.objectId;
          }]
        }
      }
    }

正如我们所见，我什至扩展了您的示例，使用了 objectId 状态参数。它正在工作......

控制器不变

.controller('tab1Ctrl', ['$scope',
    function($scope) {}
])
.controller('tab2Ctrl', ['$scope', 'resolvedObject',
    function($scope, resolvedObject) {
      alert(JSON.stringify(resolvedObject)); 
    }
])

以及标签的模板：

<div>      
  <h3>current state name: <var>{{$state.current.name}}</var></h3>

  <ul>
    <li><a href="#/tabs/tab1">#/tabs/tab1</a>
    <li><a href="#/tabs/tab2/obj1">#/tabs/tab2/obj1</a>
    <li><a href="#/tabs/tab2/obj2">#/tabs/tab2/obj2</a>
  </ul>

  <h5>place for tab-tab1</h5>
  <div ui-view="tab-tab1" ></div>

  <h5>place for tab-tab2</h5>
  <div ui-view="tab-tab2" ></div>      
</div>

一切都按预期进行。签到action here

【讨论】：

我在我的上试过了，没用，我可以给你发一个场景给你@Radim先生