CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Kingsley Simon
Kingsley Simon

Reputation: 2210

passing variable to directive via scope angularjs

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

Upvotes: 0

Views: 184

Answers (2)

Dalorzo
Dalorzo

Reputation: 20014

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

  1. @ Captures the attribute value from the DOM as string value.
  2. = Evaluates the attribute as property of the parent scope.
  3. & 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: '=',
        },

Upvotes: 1

Paul Popiel
Paul Popiel

Reputation: 1010

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")

Upvotes: 0

Related Questions