使用AngularJS和Ruby on Rails onClick更改源VideoJS

时间:2014-05-14 04:14:30

标签: javascript ruby-on-rails ruby angularjs

我目前正在学习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列表时,视频应该更改其来源。

0 个答案:

没有答案