Question

最近我用angular来开发一个指令，有一个像ng-repeat这样的指令来生成一些记录，我用transclude来实现它。但是它会引发一个错误，即指令＆＃39; bSpan＆＃39;所需的控制器＆＃39; aArea＆＃39;无法找到！＆＃34;。

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 COde

    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

您不应该使用linker函数的transclude函数（您调用compile） - 它已被弃用。

来自$compile documentation：

注意：不推荐使用传递给compile函数的transclude函数，例如不了解正确的外部范围。请使用传递给链接函数的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);
      });
  };
}

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

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

1 个答案: