点击isn't工作按钮
ng-click isn't working on button
我不知道我错过了什么,但是我不能用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-
相关文章:
- 扩展移相器按钮类不工作
- PHP Javascript显示/隐藏按钮不工作
- Facebook登录按钮没有'不能在Firefox上工作
- 为什么不是'这个jQuery汉堡包按钮不工作
- 隐藏uib弹出按钮点击不工作
- Spring WebFlow2 Javascript只在第一个单选按钮上工作
- 带有向下钻取的 Amchart 图表工作正常,但“后退”按钮不起作用
- 按钮不'我不工作;我又回到了起始页
- 主干点击事件按钮不工作
- 为什么不't在iOS上启动按钮下拉工作
- 类似按钮增量计数器不工作.PHP,AJAX,MySQL,javascript
- Hammer.js滑动不会'单击按钮后才能工作
- Sencha Touch使一个简单的按钮工作
- 提交按钮只能在onchange调用输入文本后第二次点击时工作
- JavaScript 按钮不起作用;代码与其他工作按钮相同
- 如何获得内置进度条的工作按钮动画
- Syncfusion grid with angular support:向rowTemplate中添加工作按钮
- Ng-disabled不工作按钮
- 让Select2 Gem与ActiveAdmin一起工作按钮
- 点击isn't工作按钮