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

Posted 2021-04-05

我在我的表单中使用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();
    });
  }
}

如何通过？这是否可以将指令范围传递给控制器​​？

我正在使用这款相机：https://github.com/bcabanes/ng-camera

答案

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

以上是关于如何将指令的范围值作为$ scope传递给控制器的主要内容，如果未能解决你的问题，请参考以下文章

如何使用angularjs将日期格式从控制器传递到指令

ng-style 作为变量传递给指令

将字符串设置为映射到控制器范围内成员的指令属性值

如何将 AngularJS 变量值传递给 C# 控制器？

如何将变量从 $scope 传递到指令中并反转？

AngularJS将布尔值传递给指令是未定义的