1

我有一些在 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}}].

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

4

1 回答 1

2

的文档ngClick并未表明您可以将 {{..}} 绑定用于可调用表达式。我认为它在旧版本中可能只是偶然地起作用，而新版本中的实现更改已经破坏了它。

真的，无论如何，这似乎是一种奇怪的方式来连接你的代码。您是否可以用要调用的真实函数替换 action 属性？例如

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. 例如

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>
于 2013-11-24T16:03:59.563 回答