Angular click event not working，what给出？

-1

我正在构建一个愚蠢的小计算器，试图学习AngularJS。我试图用ng-click触发事件来更新我的计算器的“屏幕”。这里是我的代码：Angular click event not working，what给出？

var calcApp = angular.module('NodeCalc', []); 
 
calcApp.controller('CalcController', ['$scope', function ($scope) { 
 
    $scope.memory = { 
 
    recall: function() { 
 
     console.log('memory recall'); 
 
    }, 
 
    clear: function() { 
 
     console.log('memory clear'); 
 
    }, 
 
    add: function(value) { 
 
     console.log('memory add'); 
 
    } 
 
    } 
 
    $scope.buttons = { 
 
    memory: [ 
 
     {text: 'mrc', action: $scope.memory.recall}, 
 
     {text: 'm-', action: $scope.memory.clear}, 
 
     {text: 'm+', action: $scope.memory.add}, 
 
    ] 
 
    }; 
 
}]);

<body ng-app="NodeCalc" ng-controller="CalcController"> 
 
    <form class="calc"> 
 
    <p class="calc-display"> 
 
     <input type="text" name="res" id="res" value="0" class="calc-display-input" onfocus="this.blur()"> 
 
    </p> 
 
    <p class="calc-row"> 
 
     <button ng-repeat="button in buttons.memory" type="button" class="calc-button calc-button-gray" ng-click="{{button.action}}">{{button.text}}</button> 
 
     <button type="button" class="calc-button calc-button-red calc-button-big" onclick="a('/')">/</button> 
 
    </p>

所以，我知道它与我附上我的记忆功能到我的范围对象的方式去做。我不能在ng-click指令中以这种方式使用范围吗？我真的不知道如何实现我的目标。按钮呈现正确的，但我得到了我的控制台一个巨大的角度误差，BARF有关：

Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/ $parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bbutton.action%7D%7D&p4=%7Bbutton.action%7D%7D

来源

2016-08-14 SpacePope

也许你的意思是'ng-click =“button.action（）”' – danh

我试过了。我得到了相同的堆栈跟踪，并且它没有发生任何点击就运行这些函数......我刚刚意识到错误是一个给出更多信息的链接：语法错误：令牌'{'表达式[ {{button.action}}]从[{button.action}}]开始。 – SpacePope

你尝试了一个文字函数吗？{text：'mrc'，action：function（）{alert（'hi'）; }}，' – danh

ng-click的表述应该是ng-click="button.action()"

在使用ng-*指令，一个是不要以为把它包与小胡子，通过表达将由angular

var calcApp = angular.module('NodeCalc', []); 
 
calcApp.controller('CalcController', ['$scope', 
 
    function($scope) { 
 

 
    $scope.memory = { 
 
     recall: function() { 
 
     console.log('memory recall'); 
 
     }, 
 
     clear: function() { 
 
     console.log('memory clear'); 
 
     }, 
 
     add: function(value) { 
 
     console.log('memory add'); 
 
     } 
 
    } 
 
    $scope.buttons = { 
 
     memory: [{ 
 
     text: 'mrc', 
 
     action: $scope.memory.recall 
 
     }, { 
 
     text: 'm-', 
 
     action: $scope.memory.clear 
 
     }, { 
 
     text: 'm+', 
 
     action: $scope.memory.add 
 
     }, ] 
 
    }; 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="NodeCalc" ng-controller="CalcController"> 
 
    <form class="calc"> 
 
    <p class="calc-display"> 
 
     <input type="text" name="res" id="res" value="0" class="calc-display-input" onfocus="this.blur()"> 
 
    </p> 
 
    <p class="calc-row"> 
 
     <button ng-repeat="button in buttons.memory" type="button" class="calc-button calc-button-gray" ng-click="button.action()">{{button.text}}</button> 
 
     <button type="button" class="calc-button calc-button-red calc-button-big" onclick="alert('/')">/</button> 
 
    </p>

被解析

来源

2016-08-14 04:25:50 Rayon

谢谢！那是我错过的！ – SpacePope

很高兴你知道@SpacePope。你们两个人中的一个能否为未来的读者解释答案？评论表明'ng-click =“button.action（）”'不起作用。 – danh

@danh - 究竟要添加什么？ – Rayon

一个想法只是要求在ng-click（正常方式）上$scope定义的函数，从ng-repeat传递$index。

ng-click="clicked($index)" 

$scope.clicked = function(index) { 
    var fn = $scope.buttons.memory[index].action; 
    fn(); 
}

来源

2016-08-14 04:28:37 danh

Angular click event not working，what给出？

回答

相关问题