Question

我无法看到我忽略了这一点，但我无法通过ng-click调用任何函数。

我的HTML元素：

<div class="field">
  <%= f.label :foto %><br>
  <input type="hidden" name="visitante[foto]" id="visitante_foto" ng-model="foto" ng-value="foto"/>
  <video id="video" width="640" height="480" autoplay></video>
  <canvas id="canvas" width="640" height="480"></canvas>
  </br>
  <button type="button" id="snap" ng-click="tirarFoto()">Tirar Foto</button>
</div>

我的角度控制器：

angular.module('controleVisitantes', ["angucomplete-alt"])
    .controller('controllerVisitantes', ['$scope', function ($scope) {
    $scope.tirarFoto = function () {

        var canvas, context;
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, 640, 480);
        $scope.foto = canvas.toDataURL();

    };
}])

编辑：我使用Ruby on Rails。我在<body>

上的<div>处向我的visitantes/new.html和ng-controller添加了ng-app

console.log()正在我的职能范围之外工作，但我无法调用任何函数。

我用ng-click尝试了<a>，<div>，<canvas>。

Answer 1

您是否已将该控制器的文件链接到index.html？

因为我只能猜测一点代码。模板是否嵌套在正确的ng-controller中，或通过正确的路由链接到控制器？此外，如果您使用的是controllerAs语法，则需要在函数调用前加上名称（例如vm）

<button type="button" id="snap" click="vm.tirarFoto()">Tirar Foto</button>ng-

Answer 2

这是一个工作的plunker：https://plnkr.co/edit/4kwNhD?p=info 脚本对我来说很好看。检查你的标记，希望它看起来像这样：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body ng-app="controleVisitantes">
    <div ng-controller="controllerVisitantes">
      <button type="button" id="snap" ng-click="tirarFoto()">Tirar Foto</button>
    </div>
  </body>
</html>

此外，我强烈建议您遵循应用的样式指南和标准命名约定。 John Papa's风格指南在角度社区非常受欢迎，但还有其他一些。当您的应用程序规模扩大和/或团队规模扩大时，这将至关重要。

ng-click不在按钮上工作

2 个答案: