AngularJS和impressJS与外部JSON工作

比方说，我使用的角度对数据绑定和阻止我使用重复码：AngularJS和impressJS与外部JSON工作

<div id="{{slide.id}}" class="step" data-x="{{slide.x}}" data-y="{{slide.y}}" data-z="{{slide.z}}" data-rotate-x="{{slide.rotateX}}" data-rotate-y="{{slide.rotateY}}" data-rotate-z="{{slide.rotateY}}" data-scale="{{slide.scale}}" ng-repeat="slide in slides"> 
    {{slide.content}} 
</div>

正如你所看到的，我准备了div，使其通过每个迭代对象在这此JSON文件：

[ 
{ 
    "id":"overview", 
    "x":3000, 
    "y":1500, 
    "z":0, 
    "rotateX":0, 
    "rotateY":0, 
    "rotateZ":0, 
    "scale":10, 
    "content":"content2" 
}, 
{ 
    "id":"slide_1", 
    "x":1600, 
    "y":1800, 
    "z":-10, 
    "rotateX":0, 
    "rotateY":0, 
    "rotateZ":0, 
    "scale":1, 
    "content":"content1" 
}, 
]

文件完全荷载作用下的：

App = angular.module('App', []); 
App.controller('SlideCtrl', ($scope, $http) -> 
$http.get('js/slides.json') 
    .then((res)-> 
     $scope.slides = res.data 
) 
)

但不知何故输出看起来是这样的：

angular-impress output

是否有任何人究竟是谁实施的角度和打动在一起吗？

来源

2013-09-10 Joey Hipolito

这对我的作品好吗 - http://jsfiddle.net/HB7LU/409/ - 你确定它不是在CSS？ –

我认为当使用impress.js是问题时，impress无法重新初始化，因此从ajax加载内容似乎不起作用 –

我也在研究这个..但有点不同..和我的代码工作100％。这里是我的HTML模板

<div ng-controller="agendaController"> 
    <ul><li ng-repeat="agendaItem in agendaItems" id="agenda-{{agendaItem.id}}" class="step" data-x="{{agendaItem.x}}" data-y="{{agendaItem.y}}" data-scale="{{agendaItem.scale}}"> 
<q>{{agendaItem.content}}</q></li></ul> 
</div>

，这里是我的javascript

var app = angular.module('app', []); 
app.controller('agendaController', function($scope){ 
$scope.agendaItems = []; 
contents = [ 
    "Various Stages in Construction of a building", 
    "Stake-holders & their levels of hierarchy from TCS to Labour", 
    "Survey Reports" 
]; 
for (i = 0, n = contents.length, x = -12000, y = -10000, scale = 2; i < n; i++) { 
    data = {'id': (i + 1), 'x': x, 'y': y, 'scale': scale, 'content': contents[i]} 
    $scope.agendaItems.push(data); 
    y += 1000; 
} 
});

来源

2013-10-24 10:37:35

AngularJS和impressJS与外部JSON工作

回答

相关问题