passing variable to directive via scope angularjs

Question

I have a variable which i want to pass to my directive via scope and then use that variable in link if it is possible. I am fairly new using directives a few things are a bit blurr to me. This is my current code

    .directive('imagesFormat', function($cordovaCamera, $ionicModal, $cordovaFile, $cordovaFileTransfer) {
      return {
        restrict: 'EA',
        scope: {
          datasource: '&',
        },
        link: function(scope, element, attrs) {
          element.bind("click", function() {
           if(attrs.imagesFormat === "takePhoto") {
              var options = {
                destinationType : Camera.DestinationType.FILE_URI,
                sourceType : Camera.PictureSourceType.CAMERA,
                allowEdit : false,
                encodingType: Camera.EncodingType.JPEG,
                popoverOptions: CameraPopoverOptions,
                correctOrientation: true
              };
            }
           if(attrs.imagesFormat === "choosePhoto") {
              var options = {
                destinationType : Camera.DestinationType.FILE_URI,
                sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
                allowEdit : false,
                encodingType: Camera.EncodingType.JPEG,
                popoverOptions: CameraPopoverOptions,
                mediaType: Camera.MediaType.PICTURE,
                correctOrientation: true
              };
            }
          scope.activeSlide = scope.datasource;
        });
      }
    }
  })

my html code

<ion-content overflow-scroll='false'>
      <div class= "row">
      <div class="col">
        <button images-format="takePhoto" datasource="$index">Take Photo</button>
      </div>
      <div class="col">
        <button images-format="choosePhoto" datasource="$index">Image Gallery/File</button>
      </div>
      </div>
    </ion-content>

So basically what i want to be able to get in my directive is the value of $index and assign it to scope.activeSlide = scope.datasource thats all

Where is $index coming from? is it a custom function, variable or string you are setting on your scope? or is it from an angular directive such as ng-repeat? — Paul Popiel
– Paul Popiel, Commented Jun 24, 2015 at 8:17

Dalorzo · Accepted Answer · 2015-06-24 13:14:25Z

1

By adding scope to the directive we create an "isolated scope". With this approach scope can capture attributes in 3 ways:

@ Captures the attribute value from the DOM as string value.
= Evaluates the attribute as property of the parent scope.
& Evaluates the attribute as method of the parent scope.

You can read more about it here:

http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

Based on your example above it seems that you need to change your & with an =

restrict: 'EA',
        scope: {
          datasource: '=',
        },

edited Jun 24, 2015 at 13:14

answered Jun 24, 2015 at 6:16

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

2 Comments

Paul Popiel Over a year ago

datasource: '=$index', this is wrong. This would imply that datasource is expected to be set from a DOM attribute called $index, e.g. <button data-images-format="choosePhoto" data-$index="...">

mikeswright49 Over a year ago

This is by far the cleanest way I've seen of the @,=,& breakdown of directives.

Paul Popiel · Accepted Answer · 2015-06-24 08:28:21Z

scope: {
    datasource: '&',
}

By doing this you are stating that you expect datasource to be bound to, effectively, a function pointer. If this is what you require then that is fine. However if you want to bind to a variable/expression use '=', or if you want to bind to a string use '@'.

Some other points as well.

You only seem to then use datasource to set a new scope variable (new since you are now working with an isolated scope):

scope.activeSlide = scope.datasource;

This from the look of it is redundant. You can simply reference scope.datasource wherever you need it instead rather then basically creating what is a duplicate at this stage.

Secondly you are accessing imagesFormat through the use of the attrs provider, which is fine... but note that you could also have this defined on the scope:

scope: {
    datasource: '&',
    imagesFormat: '@'
}

and then use:

<button images-format="takePhoto" datasource="$index">Take Photo</button>

and

if(scope.imagesFormat === "takePhoto")

Collectives™ on Stack Overflow

passing variable to directive via scope angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related