Question

您好我想使用angular js打印来自对象数组的内容。我知道有很多这样的问题但是没有出现同样问题的情况。我想打印一个对象的属性为html。我使用ng-sanitize，如许多示例所示，虽然我在控制台中出错，但它工作正常。

这是我的测试用例：

  <body  ng-controller="myCtrl">

       <div  ng-repeat="widget in widgets track by $index">
           <div ng-bind-html="widget.content">

           </div>
      </div>

    </body>
<script>

var app = angular.module("MainCtrl", ['ngSanitize']);

app.controller("myCtrl", function($scope) {
   function Widget(){
    this.content='<p>test</p>';
    }

    $scope.widgets=[];

    $scope.widgets.push(new Widget(),new Widget(),new Widget());
    console.log( $scope.widgets);


});
</script>

工作正常并按原样打印元素，但在控制台中我收到此错误：

TypeError: c.push is not a function
    at Function.K.$$addBindingInfo (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:78:223)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:252:330
    at ea (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293)
    at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
    at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:281:253 <div ng-bind-html="widget.content" class="ng-binding">

我使用角1.4.8

您是否知道此错误发生的原因或解决方法？

提前谢谢

Answer 1

我将plunkr分叉，以显示您遇到的问题。

每当使用像ngRoute或ngSantize这样的角度模块时，模块的版本必须与完全匹配到角度库的版本。在您的情况下，您使用角度1.4.8，但角度ngSanitize 1.0.3。

从CDN将代码更新为ngSanitize的正确版本（并使用angular.js而不是angular.min.js进行调试）表明ng-bind-html不会发生错误。< / p>

Answer 2

为.js文件使用正确的版本......这是代码....这是完美运行

这是index.html

<html ng-app = "myapp">
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
        <script type="text/javascript" src="test.js"></script>    
    </head>

    <body ng-controller = "myController">
        <h1>Welcome to the Angular</h1>
        {{4/3}}

        <div  ng-repeat="widget in widgets track by $index">
           <div ng-bind-html="widget.content">

           </div>
      </div>

    </body>
</html>

这是test.js

var app1 = angular.module('myapp',['ngSanitize']);

app1.controller("myController" , function($scope){

    function Widget(){
        this.content='<p>test</p>';
    }

    $scope.widgets=[];

    $scope.widgets.push(new Widget(),new Widget(),new Widget());
    console.log( $scope.widgets);

});

将这两个文件保存在一个文件夹中并运行..它完美地提供输出

Answer 3

发现错误，请勿使用导致此问题的ng-bind-html。在你的html中使用单个角度表达式，它只会起作用。

但我不知道导致这个问题的原因。

Plunkr：http://plnkr.co/edit/xiSGVIPXb27GcKRh9yR1

从元素列表中打印html angular js

3 个答案: