Question

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

.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上注入。

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

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

Answer 1

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

key - {string}：要注入控制器的依赖项的名称。 factory - {string | function}：如果是string，那么它是服务的别名。否则，如果是函数，则将其注入，并将返回值视为依赖项。如果结果是promise，则在实例化控制器并将其值注入控制器之前解析。 https://github.com/angular-ui/ui-router/wiki

Answer 2

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

我创建了 working examle here ，使用您的代码几乎是1：1。它应该可以帮助你找到差异......

这些是州：</ p>

    .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

中查看

AngularJS无法在Controller上注入已解析的对象

2 个答案: