角js网站刚刚停止工作

时间:2017-04-21 05:28:40

标签: javascript angularjs json

下面是我的整个angular.js索引页面,截至五分钟前,它正在按预期显示我在我已设置的列表中的数据库中显示的5个单独条目。重新启动chrome后,它不再有效,我收到以下错误:错误:$interpolate:noconcat

<!DOCTYPE html>
<html >
<script 
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
    .posts {
        margin: 0 0 2em 0;
        list-style-type: none;
        padding: 0;
        width: 50em;
    }
    .posts li {
        position: relative;
        left: 0;
        background-color: #EEE;
        margin: .5em;
        padding: .3em 0;
        height: 20em;
        border-radius: 4px;
    }
    .posts .text {
        position: relative;
        top: -3px;
    }
</style>
<body>

<div ng-app="myApp" ng-controller="postsCtrl">
    <h1>GWAT Websites and Designs</h1>

    <ul class="posts">
        <li *ng-repeat="post in names.retRows">
            {{post.title}}<br>
            {{post.pBody}}<br>
            {{post.category}}<br>
            <iframe ng-src={{myUrl}})></iframe><br><br>
        </li>
        </ul>
    </div>

<script>
var app = angular.module('myApp', []);
app.controller('postsCtrl', function($scope, $http) {
    $scope.myUrl = $sce.trustAsResourceUrl('https://www.angularjs.org');
    $scope.changeIt = function (changUrl) {
        $scope.myUrl = $sce.trustAsResourceUrl('changUrl');
    }
    $http.get("http://127.0.0.1:8081/process_get")
    .then(function (response) {$scope.names = response.data;});
});

</script>

我从控制台知道我的http get仍然返回一个没有改变的合适的json。任何有关此错误的帮助或我遗漏的一些小错误将不胜感激。

1 个答案:

答案 0 :(得分:2)

有一个拼写错误。另外,ng-src值需要用双引号括起来

更改<iframe ng-src={{myUrl}})></iframe><br><br>

<iframe ng-src="{{myUrl}}"></iframe><br><br>

同样,将$sce注入控制器

演示

var app = angular.module('myApp', []);
app.controller('postsCtrl', function($scope, $http,$sce) {
    $scope.myUrl = $sce.trustAsResourceUrl('https://www.angularjs.org');
    $scope.changeIt = function (changUrl) {
        $scope.myUrl = $sce.trustAsResourceUrl('changUrl');
    }
    $http.get("http://127.0.0.1:8081/process_get")
    .then(function (response) {$scope.names = response.data;});
})
.posts {
        margin: 0 0 2em 0;
        list-style-type: none;
        padding: 0;
        width: 50em;
    }
    .posts li {
        position: relative;
        left: 0;
        background-color: #EEE;
        margin: .5em;
        padding: .3em 0;
        height: 20em;
        border-radius: 4px;
    }
    .posts .text {
        position: relative;
        top: -3px;
    }
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<div ng-app="myApp" ng-controller="postsCtrl">
  <h1>GWAT Websites and Designs</h1>

  <ul class="posts">
      <li *ng-repeat="post in names.retRows">
          {{post.title}}<br>
          {{post.pBody}}<br>
          {{post.category}}<br>
          <iframe ng-src="{{myUrl}}"></iframe><br><br>
      </li>
      </ul>
</div>