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-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状态中包含指令的关键理解。请帮忙。

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 （小引用）：

restrict选项通常设置为：


＆＃39; A＆＃39; - 仅匹配属性名称

＆＃39; E＆＃39; - 仅匹配元素名称

＆＃39; C＆＃39; - 仅匹配班级名称


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


＆＃39; AEC＆＃39; - 匹配属性或元素或类名

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

1 个答案: