Question

我正在尝试使用在页面上显示json元素的angular。它不起作用。我想做的事情非常简单。但它不起作用

这是我的代码：

(function(){
    var app = angular.module('store', []);

    app.controller('PortfolioController',function(){
        this.product = gem;
    });

    var gem = 
            {
        name: 'TEmp',
        aboutme: 'A Computer Science student at <br>The University Canada.<br> <br>A Software Engineer'
        };

})();

Answer 1

所有其他评论/答案都有一些有效的观点。你面临的主要问题是1）你使用过时的Angular版本;-)和2）你需要使用$ sce服务来创建可信赖的HTML：

(function(app){
    app.controller('PortfolioController',function($sce){
        this.product = {
            name: 'TEmp',
            aboutme: $sce.trustAsHtml('A Computer Science student at <br>The University Canada.<br> <br>A Software Engineer')
        };
    });

})(angular.module('store', []));

http://jsfiddle.net/sqxmyrcj/7/

干杯只园

Answer 2

您的javascript中存在一些问题。主要是您应该使用范围来设置要在视图中显示的变量。看到这个javascript和html：

JSFiddle

<强> HTML：

<html ng-app="store">

    <body ng-controller="PortfolioController">
        <p ng-bind-html-unsafe='product.aboutme'></p>
    </body>

</html>

<强> JAVASCRIPT：

(function(){
    var app = angular.module('store', []);

    app.controller('PortfolioController',['$scope', function($scope){
        var gem = 
            {
        name: 'TEmp',
        aboutme: 'A Computer Science student at <br>The University Canada.<br>         <br>A Software Engineer'
        };

        $scope.product = gem;

    }]);
})();

Answer 3

有两种方法可以管理你的控制器，你采用的是controller as方法，另一种是大多数angularians使用得更广泛的$scope。

docs

基本上$ scope注入控制器并充当该容器的主要对象

app.controller('Ctrl', function ($scope) {
  $scope.product = {
    name: ...
  };
});
...
{{product.name}}

scope fiddle fix

controller as方法允许更大的灵活性，但也有更多的原型复杂性。

app.controller('Controller', function () {
  this.product = {
    name: ...
  };
});

<div ng-controller="Controller as ctrl">
   {{ctrl.product.name}}
</div>

Angular不在我的json中渲染

3 个答案: