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給出？

回答

相關問題