javascript - 语法错误: Token '{' Invalid Key - Errors even when displaying correctly

Question

我在这里很挣扎(我仍然是编程新手)，我有一个 ng-repeat 正在重复一个列表(页面上的页面)，它在前端显示正确的数字(即 1)但是，当我尝试对 ng-click 使用相同的方法，它会抛出此错误:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 31 of the expression [getCtrlScope().currentPage = {{ page }}] starting at [{ page }}].

奇怪的是，它会在 HTML 代码中正确显示它，但无法运行。

代码:

<li class="page-item" ng-repeat="page in Pages">
    <a class="page-link" ng-click="getCtrlScope().currentPage = {{ page }}">{{ page }}</a>
</li>

以 HTML 形式呈现时显示的内容:

<li class="page-item ng-scope" ng-repeat="page in Pages">
   <a class="page-link waves-effect ng-binding" ng-click="getCtrlScope().currentPage = 2">2</a>
</li>

JS

var MyApp = angular.module('MyApp', []);

MyApp.controller('MyCtrl', function ($scope, $filter) {
    $scope.Users = tJSONData;
    $scope.currentPage = 0;
    $scope.pageSize = 3;
    $scope.search = '';
    $scope.Pages = [1, 2, 3];

    $scope.getData = function () {
        return $filter('filter')($scope.Users, $scope.search)
    }

    $scope.updatePage = function() {
        $scope.$apply(function () {
            $scope.Users = tJSONData
        })
    }

    $scope.numberOfPages = function () {
        return Math.ceil($scope.getData().length / $scope.pageSize);
    }

    $scope.getCtrlScope = function () {
        return $scope;
    }
});

MyApp.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

我环顾四周，但几乎所有的修复都是通过删除 {{ }} 来解决的，其中一些修复是有效的，因为它渲染不正确，但看起来我的渲染正确。

如果有人有任何想法，这将是一个很大的帮助:)

Answer 1

您可以直接从 View 访问范围变量，因此不需要 getCtrlScope() 函数。此外， Angular Directive(指令)内的所有变量都是作用域，因此您不需要括号 {{}}

试试这个

<li class="page-item" ng-repeat="page in Pages">
    <a class="page-link" ng-click="currentPage = page">{{ page }}</a>
</li>