Question

我正在使用ng-camera指令以我的形式访问网络摄像头

我正在 scope.snapshot 中获取图像数据uri，我想在我的控制器中获取它

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();
    });
  }
}

如何通过？是否有可能将指令的范围传递给控制器？

我正在使用以下ng-camera：https://github.com/bcabanes/ng-camera

Answer 1

如果使用的角度> 1.3，则可以使用bindToController代替范围。您将直接绑定属性

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>

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

1 个答案: