構文エラー：トークン '{'無効なキー - 正しく表示されていてもエラーが発生しました

Question

私はここで苦労しています（私はまだプログラミングに慣れていません）、表示しているページフロントエンド（すなわち1）しかし、私は試してみて、NG-クリックで同じを使用する場合、それはこのエラーがスローされます上の正しい番号：

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

あなたはgetCtrlScope（）関数を必要としないようにするには、ビューから直接、スコープ変数にアクセスすることができますだろう。また、角度のディレクティブ内のすべての変数がスコープされているあなたはブラケットを必要としないので、{{}}

この

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