代码之家 › 专栏 › 技术社区 › Sameer

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

angularjs-scope angularjs-directive angularjs javascript

Sameer · 技术社区 · 7 年前

我在窗体中使用ng camera指令访问网络摄像机

我正在获取图像数据URI scope.快照 我想把这个放到我的控制器里

控制器.js

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

// webcam
$scope.picture = false;

});

指令.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摄像机: https://github.com/bcabanes/ng-camera

1 回复 | 直到 7 年前

gyc 7 年前

如果您使用Angular>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>