[英]How to pass scope value of directive into controller as $scope
我正在使用ng-camera指令以表单形式访问网络摄像头
我正在scope.snapshot中获取图像数据uri,我想在控制器中获取它
controllers.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-camera: https : //github.com/bcabanes/ng-camera
如果您使用angular> 1.3,则可以使用bindToController而不是scope。 您将直接绑定属性
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.