AngularJS花括號沒有解析，但ng-bind有效

Question

我正在開發一個Django應用程序，我正在使用AngularJS作為我的前端。 我有一個簡單的代碼

 <div class="vert-carousel" ng-controller="PrizeController"> <div class="gallery-cell" ng-repeat="p in getPrizes()"> <div class="car-item"> <img ng-src="{{ p.thumbnail }}" alt="Can't load the image"> <p><div ng-bind="p.thumbnail"> </p> </div> </div> </div> 

控制器代碼如下：

 (function () { 'use strict'; angular .module('mainApp') .controller('PrizeController', PrizeController); PrizeController.$inject = ['$scope', 'CompetitionService', 'PrizeService']; function PrizeController($scope, CompetitionService, PrizeService) { $scope.competition = CompetitionService.getCompetition(); $scope.prizes = []; $scope.showPrice = true; $scope.detailLink = "/#!/prize/"; $scope.getPrizes = function () { console.log ("GetPrizes"); console.log($scope.prizes); return $scope.prizes; //PrizeService.getCurrentWeekList(); }; function init() { PrizeService.getCurrentWeekList().then(function(data) { console.log ("Init called"); console.log(data); $scope.prizes = data; }) } init(); } })(); 

發生的事情是，在前端，img ng-src標簽中的{{p.thumbnail}}沒有解析。 事實上，如果我在代碼中的任何地方使用花括號，我無法解決它。 但是，使用ng-bind顯示相同的值。 在我的代碼中，我試圖用{{}}和ng-bind來解析p.thumbnail，而后者是有效的。 我的輸出如下：

鏈接到輸出圖像

請幫助我理解{{}}無效的原因。

謝謝。

Answer 1

如果這是Django首先呈現的模板，那么Django Template引擎將用它可以解析的任何內容替換所有{{ something }} 。

這意味着當代碼到達瀏覽器並且AngularJS加載它時，代碼中沒有任何花括號可以解決，只是（可能）空白。

為了解決這個問題，AngularJS允許您通過interpolationProvider更改模板標記的字符。 這是文檔鏈接 。 我通常使用[[ ]] 。

以下是上述鏈接中的示例以及如何將其集成到您的應用中：

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

customInterpolationApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
});


customInterpolationApp.controller('DemoController', function() {
    this.label = "This binding is brought you by // interpolation symbols.";
});