Angular getting Syntax Error: Token ':' is an unexpected token while accessing URLs from JSON

Question

我有以下 json，我正在从中提取 tweeturl

{
  "name": "Lifehacker",
  "handle": "@lifehacker",
  "avatar": "images/lifehacker.png",
  "time": "1h",
  "tweet": "Workflow, the nifty automation app on iOS, just got a heck of a lot easier to use: ",
  "attachments": {
    "media": "image",
    "url": "images/twitter.jpg"
  },
  "tweeturl": "http://lifehac.kr/L18xlfM",
  "interaction": {
    "like": "2m",
    "retweet": "5k"
  }
}

并像这样显示：

<a href="{{tweets.tweeturl}}" ng-show="{{tweets.tweeturl}}">{{tweets.tweeturl}}</a>

但每次它执行时我都会得到 URL 但也会在控制台上收到错误消息

Syntax Error: Token ':' is an unexpected token at column 5 of the expression [http://lifehac.kr/L18xlfM] starting at [://lifehac.kr/L18xlfM].

我对 angular 很陌生，如有任何帮助和解释，我们将不胜感激

Answer 1

ng-show 需要一个 expression（例如范围变量中定义的名称，计算结果为 truthy 或falsy 值），而不是 string.

您不必使用 {{ }} 语法对其进行插值。直接传递变量即可：

<a href="{{tweets.tweeturl}}" ng-show="tweets.tweeturl">{{tweets.tweeturl}}</a>

当你改为写 ng-show="{{tweets.tweeturl}}" 时，会发生的是 Angular 首先将 {{tweets.tweeturl}} 插入到 http://lifehac.kr/L18xlfM - 然后它会尝试将其视为表达式，所以它是就像您尝试这样写 javascript：

function someFunction () {
   var abc = '123';
   http://lifehac.kr/L18xlfM    // <- this is not a correct expression
   return abc;
}

Answer 2

如果我能举例说明如何使用 ng-show 和 ng-href 就是这两个。

首先，我会在我的控制器上放置一个 $scope 或 $this 变量，并将它分配给您从您的服务中获得的 JSON 答案 ($http ???)。然后将错误变量设置为 true 或 false。

     $http.get("tweets.json").then(function(response) {
        //First function handles success
        $scope.content = response.data;
        $scope.errorGet = false;
        }, function(response) {
      //Second function handles error
      $scope.content = "Something went wrong";
      $scope.errorGet = true;
    });

鉴于你现在可以确定地知道你是否收到了你的 Json 推文，你可以重构你的视图：

<a href="{{tweets.tweeturl}}" ng-show="errorGet">{{tweets.tweeturl}}</a>

现在我们已经准备好了，我需要解释为什么你不应该使用 href 而应该使用 ng-href。碰巧可以在单击 link 之前评估表达式 {{ }}。

因此，重构代码的正确方法是：

<a ng-href="{{tweets.tweeturl}}" ng-show="errorGet">{{tweets.tweeturl}}</a>

Link 到 ng-href 文档 https://docs.angularjs.org/api/ng/directive/ngHref

希望对您有所帮助

Angular getting Syntax Error: Token ':' is an unexpected token while accessing URLs from JSON

Angular getting Syntax Error: Token ':' is an unexpected token while accessing URLs from JSON

javascript

angularjs

angular-directive