Angular - Directive generate data, I need to grab the generated json resul

Question

It's probably a basic question. Usually I set values from my directives. I never got values from my directives.

This is a simple directive named snapshot. Basically this use your camera to take a picture, mark a X and then a json will be generated. I will cut the code to not let ppl confuse...:

<snapshot width="640" height="480"></snapshot>

angular
.module('snapshot', [])
.directive('snapshot', function () {
    return {
        restrict: 'E',
        scope: {
            width: "=",
            height: "="
        },
        template: 'html template here',
        controller: function ($scope, $element) {
            $scope.data = {
                x : null,
                y: null,
                image: null
            }

            $scope.mark = function(event)
            {
                $scope.data.x = event.clientX;
                $scope.data.y = event.clientY;
            }
            $scope.takeSnapshot = function()
            {
                var context = canvas.getContext("2d");
                context.drawImage(video, 0, 0, $scope.width, $scope.height);
                $scope.gotIt = true;
                $scope.cameraOn = false;
                $scope.setMarker = true; 
                $scope.data.image = canvas.toDataURL("image/jpeg");
            }
        }
    }
});

So, I need to read outside the directive my $scope.data basically and I've no clue how to do it.

Let me try to create a hypothetic html for this...

<snapshot width="640" height="480"></snapshot>
<p>My data of my directive is : {{snapshop.data}}</p>

got my idea ? So, can someone help me with this thing ?

tyvm !!!

Answer 1

Like Fals mentioned you can pass in the data object as an attribute. You can then modify this value directly and the two way databinding will keep it updated in the controller. I created an example on plnkr below.

    angular
.module('snapshot', [])
.controller('snapshotCtrl', function(){
  var sc = this;
  sc.watchData = {
     x : 0,
      y: 0,
      image: null
  };
})
.directive('snapshot', function () {
    return {
        restrict: 'E',
        scope: {
            width: "=",
            height: "=",
            watchData: '='
        },
        template: '<button ng-click="mark($event)">Mark</button>',
        link: function(scope, elem, attrs) {
          console.log(scope.dataToWatch);
        },
        controller: function ($scope, $element) {


            $scope.mark = function(event)
            {

                $scope.watchData.x = event.clientX;
                $scope.watchData.y = event.clientY;
            }
            $scope.takeSnapshot = function()
            {
                var context = canvas.getContext("2d");
                context.drawImage(video, 0, 0, $scope.width, $scope.height);
                $scope.gotIt = true;
                $scope.cameraOn = false;
                $scope.setMarker = true; 
                $scope.watchData.image = canvas.toDataURL("image/jpeg");
            }
        }
    }
});

http://plnkr.co/edit/Tc5HigNq8Pr2nD8yUl59?p=preview