終端爲真時需要指令中的控制器

Question

我無法在指令中加載控制器的父代。我有兩個指令：h-menu和h-menu-item。 h-menu使用控制器，而h-menu-item需要該控制器。

但是h-menu指令有terminal = true，並且用這個我不能加載控制器。當我將終端設置爲false時，我可以加載控制器。

的jsfiddle：http://jsfiddle.net/gspVe/4/

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

然後，您可以使用的角度權力指示菜單項聲明，例如：

<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/