点击isn't工作按钮

ng-click isn't working on button

本文关键字:工作 按钮 isn 点击      更新时间:2023-09-26

我不知道我错过了什么,但是我不能用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。我在visitantes/new.html上的<div>上添加了ng-app到我的<body>和ng-controller

console.log()在我的函数之外工作,但我不能调用任何函数。

我用ng-click试了<a>, <div>, <canvas> .

这是一个工作柱塞: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的样式指南在angular社区中非常流行,但也有其他的样式指南。当你的应用规模扩大,或者你的团队变得更大时,这一点尤为重要。

您是否链接了index.html中的控制器文件?

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

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