Question

我无法在指令中加载控制器的父级。我有两个指令：h-menu和h-menu-item。 h-menu使用控制器，h-menu-item需要该控制器。

但是h-menu指令有terminal = true，而且我无法加载控制器。当我将terminal设置为false时，我可以加载控制器。

html：

<div ng-app="test">
    <h-menu>
        <h-menu-item>
        </h-menu-item>
    </h-menu>
</div>

这是代码js：

angular.module("test", [])

.controller("hMenu", function () {
    this.msg = "controller was loaded";
    return this;
})

.directive("hMenu", function($compile) {
    return {
        restrict: "E",
        // comment this and controller will be loaded
        terminal: true, 
        controller: "hMenu",
        require: "hMenu",
        link: function (scope, element, attrs) {
            var ul = $("<ul/>");
            ul.append(element.children());
            $compile(ul)(scope);
            element.replaceWith(ul);
        }
    };
})

.directive("hMenuItem", function($compile) {
    return {
        restrict: "E",
        terminal: true,
        require: "?^hMenu",
        link: function (scope, element, attrs, controller) {
            var li = $("<li/>");
            if (controller)
                li.html(controller.msg);
            else
                li.html("contoller not loaded!");
            $compile(li)(scope);
            element.replaceWith(li);
        }
    };
})

Answer 1

只是想了解你想要做什么。如果要替换HTML元素，为什么不使用指令提供的一些功能呢？

例如，您似乎试图用<ul>和<li>替换指令元素。而不是按照您的指示定义，为什么不能执行以下操作：

angular.module("test", [])

.directive("hMenu", function() {
    return {
        restrict: "E", 
        transclude : true,
        replace : true,
        template : "<ul ng-transclude></ul>"
    };
})

.directive("hMenuItem", function() {
    return {
        restrict: "E",
        replace : true,
        transclude : true,
        template : '<li ng-transclude></li>'
    };
})

然后，您可以使用Angular的强大功能以声明方式指示菜单项，例如：

<div ng-app="test">
    <h-menu ng-init="menuitems=['Menu #1', 'Menu #2', 'Menu #3']">
        <h-menu-item ng-repeat="m in menuitems">
            {{m}}
        </h-menu-item>
    </h-menu>
</div>

这将显示：

菜单＃1
菜单＃2
菜单＃3

我在http://jsfiddle.net/gspVe/9/

更新了一个jsfiddle

当terminal为true时，需要指令中的controller

1 个答案: