如何将指令的作用域值作为$ scope传递给控制器

Question

I am using ng-camera directive for webcam access in my form

I am getting the image data uri in scope.snapshot i want to get this in my controller

controllers.js

.controller('visitorController', ($scope) => {

// webcam
$scope.picture = false;

});

directives.js

function directive($q, $timeout) {
  return {
    restrict: 'E',
    scope: {
      actionMessage: '@',
      captureMessage: '@',
      countdown: '@',
      flashFallbackUrl: '@',
      overlayUrl: '@',
      outputHeight: '@',
      outputWidth: '@',
      shutterUrl: '@',
      viewerHeight: '@',
      viewerWidth: '@',
      cropHeight: '@',
      cropWidth: '@',
      imageFormat: '@',
      jpegQuality: '@',
      snapshot: '=',
    },
    // 'templateUrl': '/angular/ng-camera.html',
    template: ['<div class="ng-camera">',
      '<div class="ng-camera-countdown" ng-if="countdown" ng-show="activeCountdown">',
      '<p class="tick">{{countdownText}}</p>',
      '</div>',
      '<div class="ng-camera-stack">',
      '<img class="ng-camera-overlay" ng-if="overlayUrl" ng-show="cameraLive" ng-src="{{overlayUrl}}" alt="overlay">',
      '<div id="ng-camera-feed"></div>',
      '</div>',
      '</br>',
      '<button id="ng-camera-action" ng-click="getSnapshot()">{{actionMessage}}</button>',
      '</div>'].join(''),
    link,
  };

  function link(scope, element, attrs) {
    scope.getSnapshot = function () {
      if (scope.countdown !== undefined) {
        scope.countdownStart();
        scope.countdownPromise.promise.then(() => {
          $timeout(() => {
            scope.activeCountdown = false;
            scope.countdownText = parseInt(scope.countdown);
          }, 2000);

          if (scope.shutterUrl !== undefined) {
            scope.shutter.play();
          }

          Webcam.snap((data_uri) => {
            scope.snapshot = data_uri;
            console.log(scope.snapshot);
          });
        });
      } else {
        if (scope.shutterUrl !== undefined) {
          scope.shutter.play();
        }

        Webcam.snap((data_uri) => {
          scope.snapshot = data_uri;
        });
      }
    };

    scope.$on('$destroy', () => {
      Webcam.reset();
    });
  }
}

How to pass that? is this possible to pass the scope of directive into controller?

I am using this ng-camera: https://github.com/bcabanes/ng-camera

Answer 1

If you're using angular >1.3 you can make use of bindToController instead of scope. You'll have a direct binding of your properties

 angular .module('app', []); function MainCtrl() { this.name = 'Change me from input directive'; } angular .module('app') .controller('MainCtrl', MainCtrl); function FooDirCtrl() { } function fooDirective() { function link($scope) { } return { restrict: 'E', scope: {}, controller: 'FooDirCtrl', controllerAs: 'vm', bindToController: { name: '=' }, template: [ '<div><input ng-model="vm.name" size="50"></div>' ].join(''), link: link }; } angular .module('app') .directive('fooDirective', fooDirective) .controller('FooDirCtrl', FooDirCtrl); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <div ng-app="app"> <div ng-controller="MainCtrl as vm"> {{ vm.name }} <foo-directive name="vm.name"></foo-directive> </div> </div>