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

我在我的angular应用程序中使用ui路由器

下面的应用程序不是实际的应用程序，但它是代表我的问题的最小的小应用程序。感谢您的任何帮助

我在这样声明路由时使用了resolve

(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
        };
    });

}())

下面是需要解决的功能

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;
        }
    })

scope: {
    data: '='
}

如果我有这样的html，解析程序和应用程序将非常完美：（部分主列表.html）

{{dog}

名称：{{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
        };
    });

}())

（函数（）{
"严格使用",；
角度。模块（'routerApp'）。指令（'test'，函数（）{
变量链接器=函数（范围、元素）{
}
var controllerFunction=function（$scope，test）{//如何在此处插入测试，因为它报告错误**未知提供程序：testProvider您不能在指令中插入在状态下解析的数据，因为指令可以在
ui视图
外部使用，所以插入将无效。您应该像这样将数据从控制器传递到视图：

$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;
        }
    })

scope: {
    data: '='
}

视图：



请参见
您也可以对您的问题使用转置选项

从作用域中删除控制器，然后添加

transclude:true

指令中的选项

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


这是指令内容

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

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

这是名称{{name}

因此，名称将取自外部范围，而不是指令范围

请参见
Hi Dinesh，很高兴在这里见到您。不幸的是，上述解决方案不起作用。请运行plunker并单击/导航到列表页/路径，您将看到该范围。名称不会呈现任何内容，而是显示{{name}}，这意味着您的依赖项尚未正确注入指令范围。