Question

我在角色应用程序中使用ui-router。

以下应用程序不是实际的应用程序，但它是代表我的问题的最小的小应用程序。任何形式的帮助都表示赞赏。

我在声明这样的路线时使用了解决方案。

以下是需要解决的功能

angular.module('routerApp').formItemModel = function(){
  return {
    test: function(){
      return {name: 'Jenish'}
    }
  };
}

和路线定义如下：

$stateProvider.state('home.list', {
    url: '/list',
    templateUrl: 'partial-home-list.html',
    resolve: $injector.instantiate(angular.module("routerApp").formItemModel, {}),
    controller: function($scope, test) {
        $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
        $scope.name = test.name;
        }
    })

如果我有这样的HTML，

解析器和应用程序是完美的：（ partial-home-list.html ）

<ul>
    <li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
name: {{name}}

但我处于需要将此名称移至指令的情况，所以我创建了这样的测试指令。

(function () {
    'use strict';

    angular.module('routerApp').directive('test', function () {
        var linker = function (scope, element) {

        }

        var controllerFunction = function ($scope, test) { //How to inject test here as it reports error **Unknown provider: testProvider <- test**
            $scope.name = test.name;
        }

        return {
            controller: controllerFunction,
            templateUrl: 'test.html',
            restrict: 'E',
            link: linker
        };
    });

}())

更新了 partial-home-list.html ，如下所示

<ul>
    <li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
name: {{name}}
<test></test>

对于上面的例子，

Here很有吸引力。

Answer 1

您无法在指令中注入以state状态解析的数据，因为指令可以在ui-view之外使用，因此注入将无效。您应该将数据从控制器传递到视图，如下所示：

scope: {
    data: '='
}

查看：

<test data="test"></test>

请参阅plunker

Answer 2

您还可以针对您的问题使用转换选项。喜欢这个

从示波器中删除控制器，然后添加

transclude:true

指令中的

选项。

<div>
  <div>
      <b>This is directive content with </b>
  </div>
  <ng-transclude></ng-transclude>
</div>

然后您就可以像这样使用您的指令

<test>This is the name {{name}}</test>

因此，名称将取自外部范围而非指令范围。

请参阅plunker

如何在指令控制器中注入依赖项

2 个答案: