Question

我正在将我当前的角度项目转换为使用ui-router，我有点困惑。文档说明我添加了我的控制器：

$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   }
})

我已经以这种方式定义了我的旧控制器：

xap.controller('DemoCtrl', [$scope, function ($scope, demoService) {
})

其中xap定义为：

var xap = angular.module({ .... })

什么是正确的整合方法？

由于

Answer 1

您可以按名称参考预先注册的控制器：

$stateProvider.state('contacts.detail', {
    url: '/contacts/:contactId',   
    controller: 'DemoCtrl'
});

您可以将$stateParams依赖项添加到控制器以访问参数：

xap.controller('DemoCtrl', [
    '$scope',
    '$stateParams',
    'demoService',
    function ($scope, $stateParams, demoService) {
        $stateParams.contactId //*** Exists! ***//
    }
]);

但您也可以内联控制器，因此不必为每个州的每个控制器提供唯一的名称：

$stateProvider.state('contacts.detail', {
    url: '/contacts/:contactId',   
    controller: [
        '$scope',
        '$stateParams',
        'demoService',
        function ($scope, $stateParams, demoService) {
            $stateParams.contactId //*** Exists! ***//
        }
    ]
});

Answer 2

状态中的控制器不是解析字段。在该状态下，您只需要输入控制器名称，因为当您声明它时，它会“注入”您的角度模块。

所以，你必须把控制器名称这样：

$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: 'ContactsCtrl'
});

如果要注入一些变量，可以添加如下状态的对象：

$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: 'ContactsCtrl',
   myVar: function(...){
       return '...';
   }
});

所以，如果你放了一个函数，它是一个解析字段而不是控制器...你可以将它实现为状态，但最好在状态声明之外进行。

ui-router：与现有控制器集成

2 个答案: