ng-click错误,角度为1.2.0和1.2.1

时间:2013-11-24 15:44:16

标签: angularjs angularjs-ng-click

我有一些角度代码在angularjs 1.2.0-rc.1,rc.2和rc.3中有效。但它在1.2.0和1.2.1中不起作用。

我在http://plnkr.co/edit/KBYFJQ2sZeOJ79Hid1gG

上说明了问题

我的HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script data-require="angular.js@1.2.1" data-semver="1.2.1"
            src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <link rel="stylesheet" href="style.css"/>
    <script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<ul>
    <li ng-repeat="menuEntry in menuItems">
        <a ng-href="#" ng-click="{{menuEntry.action}}">{{menuEntry.text}}</a>
    </li>
</ul>
</body>

</html>

我的角度代码是

'use strict';

angular.module('app', [])
    .controller('AppCtrl', function ($scope) {
        var menuItems = [
            {
                text: "Log off",
                action: 'logoff()'
            }
        ];

        var logoff = function () {
            alert("logoff called")
        };
        $scope.menuItems = menuItems;
        $scope.logoff = logoff;
    });

如果我使用1.2.0-rc.3运行此代码,它运行时没有错误,当我点击链接时,我会收到一个警告框。但如果我用1.2.0或1.2.1运行它,我会收到一个错误:

 Error: [$parse:syntax] Syntax Error: Token 'menuEntry.action' is unexpected, expecting [:] at column 3 of the expression [{{menuEntry.action}}] starting at [menuEntry.action}}].

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:2)

ngClick的文档并未表明您可以对可调用表达式使用{{..}}绑定。我认为它可能只是在旧版本中偶然发生,并且新版本中的实现更改已经破坏了它。

无论如何,这似乎是一种奇怪的方式来挂钩你的代码。你能用一个真正的函数替换action属性来调用吗? e.g。

angular.module('app', [])
    .controller('AppCtrl', function ($scope) {
        $scope.logoff = function () {
            alert("logoff called")
        };

        $scope.menuItems = [
            {
                text: "Log off",
                action: $scope.logoff
            }
        ];
    });

然后

<a ng-href="#" ng-click="menuEntry.action()">{{menuEntry.text}}</a>

如果您确实需要以动态表达式开头,可以使用$scope.eval来调用它。 e.g。

var menuItems = [
    {
        text: "Log off",
        action: 'logoff()'
    }
];

angular.forEach(menuItems, function(menuItem) {
    menuItem.callableAction = function() { return $scope.$eval(menuItem.action); }
});

然后

<a ng-href="#" ng-click="menuEntry.callableAction()">{{menuEntry.text}}</a>