我的ng重复使用了坏链接

Question

我正在使用MEAN堆栈开发一个web应用程序，除了这个一直困扰我的错误外，它已经完成了99%https://find-nightlife.herokuapp.com/#/

我的问题是，当你搜索一个位置时，网络控制台总是会抛出以下错误：

GET https://find-nightlife.herokuapp.com/%7B%7Bplace.rating_img_url%7D%7D 404 (Not Found)
 %7B%7Bplace.image_url%7D%7D:1 GET https://find-nightlife.herokuapp.com/%7B%7Bplace.image_url%7D%7D 404 (Not Found)

github上完整代码的链接在这里https://github.com/JordanBourne/NightLife

相关代码：

<section class = "results">
<div ng-repeat = "place in results track by $index | limitTo: 10" class = "resultContainer">
    <div class = "resultsList">
        <div class = "placeImg"><img src = "{{place.image_url}}" alt = "{{place.name}}"/></div>
        <div class = "placeAbout">
            <div class = "placeName">
                <a href = "{{place.url}}">{{place.name}}</a> <img src = "{{place.rating_img_url}}" /></div>
            <div class = "placeSnippet">{{place.snippet_text}}</div>
        </div>
        <div class = "areyouGoing"><span style = "color: red">{{error}}</span> {{place.going}} Going 
            <button class = "placeGo notGo" ng-click = "plusOne(place, $index)" ng-show = "attend($index)">Not Going</button>
            <button class = "placeGo letsGo" ng-click = "plusOne(place, $index)" ng-hide = "attend($index)">Let's Go!</button>
        </div>
    </div>
    <div class = "divider" ng-hide="$last"></div>
</div>

app.controller('NightLifeCtrl', [
'$scope',
'yelp',
'auth',
function ($scope, yelp, auth) {
    if(yelp.places.data) {
        var attendanceIndex = [];
        yelp.bars.forEach(function(bar) {
            if (bar.people.indexOf(auth.currentUser()) < 0) {
               attendanceIndex.push(0);
            } else {
               attendanceIndex.push(1);
            }
        })
        $scope.attend = function (num) {
            if (attendanceIndex[num] == 1) {
                return true;
            } else {
                return false;
            }
        }
        $scope.results = yelp.bars;
        $scope.plusOne = function(place, num) {
            if (!auth.isLoggedIn()) {
                $scope.error = 'You must be logged in!';
                return;
            }
            yelp.addOne(place);
            if (attendanceIndex[num] == 1) {
                return attendanceIndex[num] -= 1;
            } else {
                return attendanceIndex[num] += 1;
            }
        }
    }
}
]);

所有angular.js都在public/js/scripts.js中，有罪的ng repeat在public/nightlife.html中，主页在views/index.ejs 中

我感谢任何帮助！

Answer 1

将<img src = "{{ ..}}">替换为<img ng-src = "{{ ..}}">。ng src属性支持动态内容。

Answer 2

在href属性中包含{{<expressions>}}时，始终使用ng-href=""属性。

这将阻止大多数不必要的行为。

这是ng href的文档。

引用文件：

错误的书写方式：

<a href="http://www.gravatar.com/avatar/{{hash}}">link1</a>

正确的书写方式：

<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>