Angularjs 在嵌入内容中找不到指令所需的控制器

Question

最近用angular开发了一个指令，有一个指令类似ng-repeat来生成一些记录，我用transclude来实现。但它引发了 "Controller 'aArea', required by directive 'bSpan', can't be found!" 的错误。

1.模块A码

    var moduleA = angular.module("moduleA", []);

    moduleA.directive("aArea", function () {
        return {
            restrict: 'E',
            transclude:'element',
            scope: {
                amount:"="
            },
            template: '<div id=\"cc\" ng-transclude></div>',
            controller: function ($scope,$element,$attrs) {
                this.getData = function (data) {
                    return data + " is ok";
                }
            },
            compile: function (tElement, attrs, linker) {
                var parentElement = tElement.parent();

                return {
                    pre: function () {

                    },
                    post: function (scope) {
                        linker(scope.$parent,function (clone,scope) {
                            parentElement.append(clone);
                        });
                        linker(scope.$parent, function (clone, scope) {
                            parentElement.append(clone);
                        });
                        linker(scope.$parent, function (clone, scope) {
                            parentElement.append(clone);
                        });
                    }
                }
            }
        }
    });

   moduleA.directive("bSpan", function () {
        return {
            restrict: 'E',
            scope: {
                data: "=",
            },
            template: '<span style=\"background-color:gray;color:orange\">{{data}}</span>',
            require: "^aArea",
            link: function ($scope, $element, $attrs, controller) {
                var data = "abc";
            }
        }
    });

2。 ModuleB代码

    var moduleB = angular.module("moduleB", []);

    moduleB.directive("myItem", function () {
        return {
            restrict: 'E',
            scope: {
                item: "=",
                itemTemplate: '='
            },
            priority: 1000,
            terminal:false,
            template: '<ng-include src=\"itemTemplate\"/>',
            controller: function ($scope, $element, $attrs) {
                var data = "";
            }
        }
    })

3。 ModuleC代码

    var moduleC = angular.module("moduleC", ["moduleA", "moduleB"]);
    moduleC.controller("Ctr", function ($scope) {
        $scope.item = {};
        $scope.item.dataAmount = 1000;
        $scope.item.templateUrl = "item-template.html";
    })

4. Html代码

<body>
<div ng-app="moduleC">
    <div ng-controller="Ctr">
        <a-area>
            <my-item item="item" item-template="item.templateUrl"></my-item>
        </a-area>
    </div>
</div>
</body>

5.模板代码

<div>
    <span style="display:block">hello every one</span>
    <b-span data="item.dataAmount"></b-span>
</div>

Answer 1

您不应使用 compile 函数的 transclude 函数（您称为 linker）——它已被弃用。

来自 $compile documentation:

Note: The transclude function that is passed to the compile function is deprecated, as it e.g. does not know about the right outer scope. Please use the transclude function that is passed to the link function instead.

按照此指南（以及其他一些更好的小改动），按如下方式更改 aArea 指令：

compile: function(tElement, tAttrs) {
  // don't use the template element 
  //var parentElement = tElement.parent();

  return function(scope, element, attrs, ctrls, transclude) {
      transclude(function(clone, scope) {
        element.after(clone);
      });
      transclude(function(clone, scope) {
        element.after(clone);
      });
      transclude(function(clone, scope) {
        element.after(clone);
      });
  };
}

事实上，您根本不需要 transclude 功能，也不需要 transclude: "element"。您可以更改为 transclude: true 并在模板中使用 <div ng-transclude> 3 次。

Angularjs 在嵌入内容中找不到指令所需的控制器

Angularjs controller required by directive can not be found in transclude content

directive

angularjs