2015-01-12 61 views
0

我正在設置數據背景屬性。任何想法爲什麼這不起作用?Reveal.js和角 - 背景故障

angular.module('app',[]).controller('SlidesController',['$scope','$timeout', function($scope,$timeout){ 
 
    
 
    $scope.slides = [ 
 
    { title:"I'm white - but should have some color", background:"#22BB44"}, 
 
    { title:"...no color here? Why??", background:"#99BB44"} ]; 
 
    
 
    $timeout(function(){ 
 
    Reveal.initialize({ 
 
     autoSlide: 1500, 
 
     loop:true 
 
     });  
 
    }, 1000); 
 
    
 
    
 
}]);
.slides section { 
 
    font-size: 50px; 
 
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> 
 
<script src="https://rawgit.com/hakimel/reveal.js/master/js/reveal.js"></script> 
 
<link rel="stylesheet" href="https://rawgit.com/hakimel/reveal.js/master/css/reveal.css"></style> 
 

 
<body ng-app="app" ng-controller="SlidesController"> 
 

 
    
 
    <div class="reveal"> 
 
    <div class="slides"> 
 
     <!-- this works --> 
 
     <section data-background="#0000aa"> 
 
      I'm blue 
 
     </section> 
 
     
 
     <!-- this works, except for the background --> 
 
     <section data-background="{s.background}" ng-repeat="s in slides">{{s.title}}</section> 
 
     
 
    </div> 
 
</div> 
 

 
</body>

回答

1

簡單的修補程序,只需要創建一個指示該屬性

.directive('slidebackground', function(){ 

return { 
    link: function(scope, element, attrs) { 
    attrs.$set('data-background', attrs.slidebackground); 
} 
});