我目前正在学习Angular.js并将其与Ruby on Rails集成,
我有一个示例项目,列出所有Railscasts视频,并在VideoJS上显示所选视频。
这是我目前的代码:
主/索引
<div ng-controller="ScreencastsCtrl">
<div id="screencast-list-container" >
<ul>
<li ng-repeat="screencast in screencasts"
ng-click="showScreencast(screencast, $index)">
<h3 ng-class="{active: $index == selectedRow}">{{screencast.title}}
<small>({{screencast.duration}})</small></h3>
</li>
</ul>
</div>
<div id="screencast-view-container" ng-show="selectedScreencast">
<h2>{{selectedScreencast.title}}</h2>
<p>{{selectedScreencast.summary}}</p>
<%= video_player src: { mp4: "{{ selectedScreencast.video_url }}" }, controls: true , id: "player"%>
<p>
Published at {{selectedScreencast.published_at | date: 'mediumDate'}}
- <a ng-href="{{selectedScreencast.link}}">{{selectedScreencast.link}}</a>
</p>
</div>
</div>
资产/ Javascript角/控制器
App.controller 'ScreencastsCtrl', ['$scope', 'Screencast', ($scope, Screencast) ->
# Attributes accessible on the view
$scope.selectedScreencast = null
$scope.selectedRow = null
# Gather the screencasts and set the selected one to the first on success
$scope.screencasts = Screencast.query ->
$scope.selectedScreencast = $scope.screencasts[0]
$scope.selectedRow = 0
# Set the selected screencast to the one which was clicked
$scope.showScreencast = (screencast, row) ->
$scope.selectedScreencast = $scope.screencasts[row]
$scope.selectedRow = row
]
在此代码中,当我在列表中选择Railscasts视频时,我能够更改
的内容h3(screencast.title)
发布于(selectedScreencasts.published_at)
我可以在我的页面上更改onload上的videojs源,但是当我点击Railscasts列表时,视频应该更改其来源。