无法在包含内容中找到指令所需的Angularjs控制器

RonSmith 发表于 Dev

罗恩·史密斯

最近我使用angular开发了一个指令，有一个指令像ng-repeat来生成一些记录，我使用了transclude来实现它。但是它引发了一个错误，即“找不到指令'bSpan'所需的控制器'aArea'！”。

1. ModuleA代码

    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>

新开发者

您不应使用该函数的transclude函数（已调用linker）compile-已过时。

从$compile 文档：

注意：transclude不建议使用传递给compile函数的函数，因为它例如不知道正确的外部作用域。请改用传递给link函数的transclude函数。

遵循此指南（以及其他一些较小的更改），请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);
      });
  };
}