CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui-router
Koustuv Sinha
Koustuv Sinha

Reputation: 1670

How can I display custom directive within an ui-view?

I have a configuration as in the following plunkr : http://plnkr.co/nya3cr

Of which I have states as : 

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

I am trying to use custom directives in ui-views like this.

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

But I cant use it within an ui-view element, such as in my configuration, I have tried keeping my custom directive (sidebar-directive) in left.html

<div sidebar-directive></div>

as well as in right.html but it doesn't show up. I may be missing some key understanding about how to include directives in ui-view states. Please help.

Upvotes: 2

Views: 2160

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

You should use A instead of E for restrict. Check the updated 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');
      }
    };
  });

Because A means attribute and E means element and we are using it as attribute:

<div sidebar-directive></div>

Updated version is here

The Developer guide - directive (small cite):

The restrict option is typically set to:

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name

These restrictions can all be combined as needed:

  • 'AEC' - matches either attribute or element or class name

Upvotes: 3

Related Questions