Angular不在我的json中渲染

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

这是我的代码：

http://jsfiddle.net/sqxmyrcj/1/

(function(){ var app = angular.module('store', []); app.controller('PortfolioController',function(){ this.product = gem; }); var gem = { name: 'TEmp', aboutme: 'A Computer Science student at 
The University Canada.
 
A Software Engineer' }; })(); 

Answer 1

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

文档

基本上$ scope被注入控制器并作为该容器的主要对象

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

范围小提琴修复

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

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

Answer 2

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

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

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

干杯祗园

Answer 3

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

的jsfiddle

HTML：

JAVASCRIPT：

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