如何在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' - 无论是属性或元素或类名