AngularJS中的自定义指令和路由

我对AngularJS和Javascript还是很陌生，但是我设法将一个自定义的camera指令放到一起，以我想要的方式工作。它使我可以从可用的照相机列表中选择照相机，拍摄快照，显示所拍摄的照片并具有用于保存照片或关闭照片的按钮。问题是，当我将路由添加到应用程序时，单击按钮将不再发生任何事情。所以我的问题是，与应用程序一起使用路由时，如何使该指令像以前一样工作？

这是指令：

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>

非常感谢您提供任何帮助！