如何在ui-view中显示自定义指令?

时间:2014-11-24 07:16:07

标签: angularjs angularjs-directive angular-ui-router

我有一个配置,如下面的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-views中使用自定义指令。

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

但是我无法在ui-view元素中使用它,例如在我的配置中,我尝试在left.html中保留我的自定义指令(sidebar-directive)

<div sidebar-directive></div>

以及在right.html中,但它并没有显示出来。我可能会遗漏一些关于如何在ui-view状态中包含指令的关键理解。请帮忙。

1 个答案:

答案 0 :(得分:2)

对于 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 (小引用)

  

restrict选项通常设置为:

     
      
  • &#39; A&#39; - 仅匹配属性名称
  •   
  • &#39; E&#39; - 仅匹配元素名称
  •   
  • &#39; C&#39; - 仅匹配班级名称
  •   
     

这些限制可以根据需要合并:

     
      
  • &#39; AEC&#39; - 匹配属性或元素或类名
  •