为什么我无法在onClick html事件上传递angularJS参数?

时间:2015-06-28 01:54:21

标签: javascript html angularjs angularjs-directive

我正在尝试用html中的AngularJS表达式连接一个字符串。请参阅上面的示例:

angular.module("app", []);
function MyCtrl($scope){
    $scope.item = "Hello";
    $scope.say = function(text){
        alert(text);
    };
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    function openFunctionJS(param){
        alert(param);
    };
</script>
<div ng-app="app" ng-controller="MyCtrl">
    <a ng-click="say(item + ' World')">Say {{item}} World by ngclick</a><br/>
    <a onclick="openFunctionJS('{{item}}')">Say {{item}} World by onclick</a>
</div>

http://jsfiddle.net/murphycwb/zr3cc4od/

但它不起作用。我的整个功能都在JavaScript中,如果可能的话我现在不想改变它。

我做错了什么?

1 个答案:

答案 0 :(得分:1)

当您尝试执行此操作时,AngularJS抛出的错误非常具体

  

不允许使用HTML DOM事件属性的插值。请   使用ng-版本

但这不是问题,因为框架为这些事件提供了ng-个解决方案。我看到你已经在使用ng-click,那么为什么不利用它来解决这个问题呢?如果您的目标是保持openFunctionJS不受影响,则没问题 - 只需在$scope.say内调用即可。这是一个想法......

注意 - 我更改了MyCtrl的定义。通常不鼓励使用全局函数作为控制器

<script>
function openFunctionJS(param) {
    alert(param); // this is called inside $scope.say()
};
</script>

<a ng-click="say(item + ' World')">Say {{item}} World from ng-click</a>
angular.module('app', []).controller('MyCtrl', function($scope) {
    $scope.item = 'Hello';
    $scope.say = function(text) {
        openFunctionJS(text)
    };
});

JSFiddle Link - 工作演示