0

使用视频播放器指令的模板：

<form action="#" name="postLinkForm" id="postLinkForm" ng-submit="$event.preventDefault()" novalidate>
      <div class="mdl-textfield mdl-js-textfield" ng-hide="postLinkForm.link.$valid">
        <input ng-model="vm.tumblrLink" class="mdl-textfield__input" name="link" ng-change="vm.isValid(postLinkForm.$valid)" type="url" ng-pattern="vm.pattern" required>
        <label class="mdl-textfield__label" for="sample2">Tumblr Link e.x http://example.tumblr.com/post/142553237362/</label>
        <span class="mdl-textfield__error" ng-show="postLinkForm.link.$dirty && postLinkForm.link.$invalid">This has to be a tumblr post url</span>
      </div>
      <div class="popupVideoContainer" ng-show="postLinkForm.link.$valid && vm.videoData">
        <video-player video-data="vm.config"></video-player>
      </div>
</form>

上面模板的控制器：

function tumblrLink ($scope, $sce, $uibModalInstance, tumblrVideoData) {
    var vm = this;


    vm.validity = false;

    vm.videoData = {};

    vm.tumblrLink = "";


    vm.config = {
            sources: [
                {src: $sce.trustAsResourceUrl(vm.videoData.src), type: "video/mp4"},
            ],
            tracks: [
                {
                    src: "",
                    kind: "",
                    srclang: "",
                    label: "",
                    default: ""
                }
            ],
            theme: "/videogular-themes-default/videogular.css",
            plugins: {
                poster: vm.videoData.poster
            }
        };


    vm.isValid = function (valid) {
      if (valid) {
        vm.validity = true;

        vm.videoData = tumblrVideoData.postVideo(vm.tumblrLink);

      }
    };

  }

视频播放器指令：

function videoPlayer () {

    return {
      restrict: 'EA',
      templateUrl: '/common/directives/videoPlayer/videoPlayer.template.html',
      scope: {
        videoData: "="
      },
      link: function (scope, element, attrs) {
        scope.$watch('videoData', function (newVal, oldVal) {
          console.log(newVal);
        });
      }

    };
  }

首先，用户将在输入框中输入一个链接（name="link）。如果链接有效，我会将链接发布到某个 API 并返回一些数据，然后将其设置为 vm.videoData.vm.config依赖于 vm.videoData 上的数据，如果 vm.videoData 更新，则 vm.config 也应该更新，然后 video-player 指令中的属性 video-data 也会得到更新。

指令视频播放器将显示链接是否有效，即通过 ng-pattern。问题是，在 vm.videoData 从 API 取回数据后， vm.config 似乎没有更新，或者至少属性 video-data 没有收到更新。而且我已经应用了 scope.$watch 来观察 vm.config 上的变化。

有什么问题？

视频播放器模板：

<videogular vg-theme="videoData.theme">
  <vg-media vg-src="videoData.sources"
      vg-tracks="videoData.tracks">
  </vg-media>

  <vg-controls>
    <vg-play-pause-button></vg-play-pause-button>
    <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
    <vg-scrub-bar>
      <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
    </vg-scrub-bar>
    <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
    <vg-volume>
      <vg-mute-button></vg-mute-button>
      <vg-volume-bar></vg-volume-bar>
    </vg-volume>
    <vg-fullscreen-button></vg-fullscreen-button>
  </vg-controls>

  <vg-overlay-play></vg-overlay-play>
  <vg-poster vg-url='videoData.plugins.poster'></vg-poster>
</videogular>

该指令没有控制器。

4

1 回答 1

0

我将 vm.config 移到了 vm.isValid() 中。然后我变了

<div class="popupVideoContainer" ng-show="postLinkForm.link.$valid && vm.videoData">

至

<div class="popupVideoContainer" ng-if="postLinkForm.link.$valid && vm.videoData">

这样，vm.config 将首先接收新的更新，然后传递给 video-data 属性。自从我添加了 ng-if 以来，Angular 在启动时不会抱怨 vm.config 的空虚。

我仍然不知道该指令是否可以接收来自 vm.config 的更新，但至少它解决了我的问题。

于 2016-04-14T00:58:56.320 回答