如何在UI視圖中顯示自定義指令？

Question

我有一個配置，如下plunkr：http://plnkr.co/nya3cr

中，我有作爲的狀態：

.state('main.layout', { 
     url : '/l', 
     abstract : true, 
     views : { 
      'left' : { 
      templateUrl : 'left.html', 
      controller : 'LeftCtrl' 
      }, 
      'right' : { 
      templateUrl : 'right.html', 
      controller : 'RightCtrl' 
      }, 
      'middle' : { 
      templateUrl : 'middle.html', 
      controller : 'MiddleCtrl' 
      }, 
      'bottom' : { 
      templateUrl : 'bottom.html' 
      } 
     } 
     }) 

我想使用這樣的UI的視圖定製指令。

.directive('sidebarDirective', function() { 
    return { 
     template: 'Hello hello!', 
     restrict: 'E', 
     link: function postLink(scope, element, attrs) { 
     element.text('this is the sidebarDirective directive'); 
     } 
    }; 
    }); 

，但我不能一個用戶界面視圖元素中使用它，比如在我的配置，我試圖讓我的自定義指令（側邊欄指令）在left.html

<div sidebar-directive></div> 

以及如在right.html中，但它不顯示。我可能會忽略關於如何在UI視圖狀態中包含指令的一些關鍵理解。請幫忙。

Answer 1

您應該使用A而不是E爲restrict。檢查更新version here

.directive('sidebarDirective', function() { 
    return { 
     template: 'Hello hello!', 
     restrict: 'A', // here should be A, could be even 'AE', but for us A is must! 
     link: function postLink(scope, element, attrs) { 
     element.text('this is the sidebarDirective directive'); 
     } 
    }; 
    }); 

因爲A意味着屬性和E意味着元素，我們使用它作爲屬性：

<div sidebar-directive></div> 

更新版本here

的Developer guide - directive（小引用）：

的限制選項通常設置爲：

• 'A' - 僅匹配屬性名稱
• 'E' - 僅匹配元素名稱
• 'C' - 僅匹配的類名

這些限制可以根據需要所有組合：

• 'AEC' - 無論是屬性或元素或類名