javascript - AngularJS 中的自定义指令和路由

Question

我也是 AngularJS 和 Javascript 的新手，但我已经设法组合了一个自定义相机指令，它可以按照我想要的方式工作。它让我可以从可用相机列表中选择相机、拍摄快照、显示拍摄的照片以及用于保存照片或关闭照片的按钮。问题是，当我将路由添加到应用程序时，单击按钮时不再发生任何事情。所以我的问题是，在应用程序中使用路由时，如何使该指令像以前一样工作？

这是指令:

app.directive('camera', function () {
return {
    template: '\
    <div ng-show="showVideo">\
        <div class="select">\
            <label for="videoSource">Video source: </label><select id="videoSource"></select>\
        </div>\
        <video id="video" width="640" height="480" autoplay></video>\
        <button id="snap">Snap Photo</button>\
    </div>\
    <div ng-show="showSnap">\
        <canvas id="canvas" width="640" height="480"></canvas>\
        <button id="save">Save Photo</button>\
        <button id="cancel">Cancel</button>\
    </div>',
    link: function ($scope) {

        $scope.showVideo = true;
        $scope.showSnap = false;

        var videoElement = document.querySelector('video');
        var videoSelect = document.querySelector('select#videoSource');

        navigator.getUserMedia = navigator.getUserMedia ||
            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        function gotSources(sourceInfos) {
            for (var i = 0; i !== sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                var option = document.createElement('option');
                option.value = sourceInfo.id;
                if (sourceInfo.kind === 'video') {
                    option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
                    videoSelect.appendChild(option);
                } else {
                    console.log('Some other kind of source: ', sourceInfo);
                }
            }
        }

        if (typeof MediaStreamTrack === 'undefined') {
            alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
        } else {
            MediaStreamTrack.getSources(gotSources);
        }

        function successCallback(stream) {
            window.stream = stream; // make stream available to console
            videoElement.src = window.URL.createObjectURL(stream);
            videoElement.play();
        }

        function errorCallback(error){
            console.log('navigator.getUserMedia error: ', error);
        }

        function start(){
            if (!!window.stream) {
                videoElement.src = null;
                window.stream.stop();
            }
            var videoSource = videoSelect.value;
            var constraints = {
                audio: false,
                video: {
                    optional: [{sourceId: videoSource}]
                }
            };
            navigator.getUserMedia(constraints, successCallback, errorCallback);
        }

        videoSelect.onchange = start;

        start();

        // Take snapshot example

        // Put event listeners into place
        window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function(error) {
                console.log("Video capture error: ", error.code); 
            };

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
            $scope.$apply(function () {
                context.drawImage(video, 0, 0, 640, 480);
                $scope.showVideo = false;
                $scope.showSnap = true;
            });
        });

        // Save photo
        document.getElementById("save").addEventListener("click", function() {
            $scope.$apply(function () {
                var image = new Image();
                image.src = canvas.toDataURL("image/jpg");
                $scope.image = image.src;
                console.log($scope.image);
                $scope.showVideo = true;
                $scope.showSnap = false;
                //return image;
            });

        });
        document.getElementById("cancel").addEventListener("click", function() {
            $scope.$apply(function () {
                $scope.showVideo = true;
                $scope.showSnap = false;
            });
        });
    }, false);
    }
};
});

这是我的 app.js:

var app = angular.module('cameraApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
         $routeProvider .when('/', {
             controller: 'CameraController',
             templateUrl: 'views/app.html'
         })
         .when('/login', {
             controller: 'LoginController',
             templateUrl: 'views/login.html'
         })
         .otherwise({redirectTo: '/login'});
}]);


app.controller('MainController', function($scope, $window) {
    console.log($window);
    console.log($scope);
});

app.controller('LoginController', function($scope) {

});

app.controller('CameraController', function($scope) {

});

这是我的 index.html:

<!DOCTYPE html>
<html lang="en" ng-app="cameraApp">
<head>
    <meta charset="utf-8">
    <title>AngularCameraApp</title>
    <!--<link rel="stylesheet" href="style.css">-->
</head>
<body ng-controller="MainController">

    <ul>
        <li><a href="#/login">Login</a></li>
        <li><a href="#/">App</a></li>
    </ul>

    <div ng-view></div>

    <script src="js/lib/angular.min.js"></script>
    <script src="js/lib/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/directives.js"></script>
</body>

非常感谢任何帮助!

Answer 1

我终于成功了。我需要在我的回答中提出三点，解决方案，问题，错误/建议。我将首先提出解决方案，然后我将编辑以添加其他部分。请在更新后重新阅读我的答案。

解决方案

首先你可以看到这个工作plunker

我将您的点击函数移动到 $scope 变量中，如下所示:

    $scope.snap = function() {
      console.log("coucou");
      var canvas = document.getElementById("canvas");
      context = canvas.getContext("2d");
      context.drawImage(video, 0, 0, 640, 480);
      $scope.showVideo = false;
      $scope.showSnap = true;
    }


    // Save photo
    $scope.save = function() {
          var image = new Image();
          image.src = canvas.toDataURL("image/jpg");
          $scope.image = image.src;
          console.log($scope.image);
          $scope.showVideo = true;
          $scope.showSnap = false;
    }
    $scope.cancel = function() {
      $scope.showVideo = true;
      $scope.showSnap = false;
    }

在 window.addEventListener("DOMContentLoaded", function(){}) 之外

我在您的元素上添加了一些 ng-click 以将它们绑定(bind)到函数。

    <button ng-click="save()">Save Photo</button>

这就是全部。

问题

现在的问题是，为什么使用路由后才出现这个错误？

你必须知道使用

 window.addEventListener("DOMContentLoaded", function(){})

在 AngularJS 中不是一个好主意。

Angular 将加载第一页:index.html(在我的 plunker 中)和一个 div

 <ng-view></ng-view>

当 html 文件完全加载时，上面的函数将被触发。但该页面实际上并未完全构建。您的 DOM 实际上已完全加载，但 Angular 将使用其路由系统将 app.html(在我的 plunker 中)添加到 ng-view 元素中。

当 window.addEventListener("DOMContentLoaded", function(){}) 第一次运行时，三个按钮不存在。所以没有添加点击事件。

错误/建议

我看到了很多在angularJS中不应该做的事情。我将向您展示应该做什么以及如何完成。

1 - 操作 DOM

在 Angular 中，您不需要从 JavaScript 操作 DOM。如果您想这样做，请记住，您的所有需求都可以通过使用原生 Angular Directive(指令)来实现。

在 Angular 你不应该看到这个:

 document.getElementById("snap").addEventListener("click",
 window.addEventListener("DOMContentLoaded", 
 videoSelect.appendChild(option);
 document.createElement('option');

相反，您应该看到这种指令:

 //To launch a function on a click/change/focus/blur etc...
 <div ng-click="myfunction()"></div>
 <input ng-model="myvar" ng-change="function()">
 etc...

您的所有需求都可以在这个短angular tutorial中找到

希望对你有帮助。

2 - 指令

指令的目的是为元素添加行为。在您的用例中，如果您重新使用指令是一个不错的选择，如果您不重新使用您的组件，那么从中创建指令并不是那么有用。还要记住，自定义指令是错误的 friend 。大多数时候，您不需要它们以干净的方式执行您想要的操作。

3 - $申请

在 Angular 中，你只想尽可能地远离 $apply() 。在某些情况下，它确实会降低性能，而您在 90% 的时间里都不需要它。

4 - 一种干净的方式来做你想做的事

我真的很想向您展示这个在 plunker 中的工作方式，但是需要太多的工作才能使您的指令适应干净的方式。通过这种方式，您应该将很多东西放入 CameraService(获取媒体流、启动它、停止它等的功能)，并且只需将一些绑定(bind)放入您的 Controller 和 HTML 中以获得相同的结果。

另一种干净的方法是使用容器指令和一些指令在每个元素上添加您想要的行为。但这需要对 angularJS 有一些很好的了解

希望对你有所帮助。如果您有任何问题，请随时提出。

编辑:回答评论中的问题

我将其添加到指令中。你可以看到它在工作 here

    $scope.$on('$locationChangeStart', function(event) {
        if (!!window.stream) {
            videoElement.src = null;
            window.stream.stop();
        }
    });