Angular.JS binding attribute in element directive

Question

What I want to do is to create an element directive, that can have bindable attributes and can work with static values.

Ex. I have a directive myTag which should support enablel/disable of some features... I want this to work like

<my-tag enable_f1="true" enable_f2="true" />

or like

<my-tag enable_f1="{{mc.someVal1}}" enable_f2="{{mc.someVal2}}" />

Now how can I write link method, to support binding to the attributes as well as static values?

 angular.module('TestModule',[])
  .directive('myTag',function() {
      return {
          restrict: 'E',
          templateUrl: '<div></div>',
          link: function (scope, element, attrs){
                 //I can get attrs.enable_f1, attrs.enable_f2, but what if it is bound to model? 
          }
      }
  });

Omri Aharon · Accepted Answer · 2015-10-28 16:43:00Z

2

You can have an isolated scope that gets these values:

HTML:

<my-tag enable-f1="mc.someVal1" enable-f2="mc.someVal2"></my-tag>
<my-tag enable-f1="true" enable-f2="false"></my-tag>

Directive:

myApp.directive('myTag',function() {
      return {
          restrict: 'E',
          template: '<div></div>',
          scope: {
              enableF1: '=',
              enableF2: '='
          },
          link: function (scope, element, attrs){
                 console.log(scope.enableF1);
                 console.log(scope.enableF2);
          }
      }
  });

Fiddle

answered Oct 28, 2015 at 16:43

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arsen Mkrtchyan Over a year ago

hope I will use to this scopes some day :) thanks a lot, I will try

Arsen Mkrtchyan Over a year ago

How can I get changes of enableF1, and enableF2? should I use watch? for example when it is bound, and it have been changed on model, how can I get notification in directive? if I use watch, will it be ok if the value is static?

Arsen Mkrtchyan Over a year ago

Oh, I see it work with watch, thanks a lot for answer jsfiddle.net/db64ttxp

Omri Aharon Over a year ago

@ArsenMkrtchyan Yes the value of $scope.enableF1 will automatically change, good luck!

Collectives™ on Stack Overflow

Angular.JS binding attribute in element directive

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related