Question

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

<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，然后视频播放器指令中的属性视频数据也将获得更新。

指令视频播放器将显示链接是否有效，即传递ng-pattern。问题是，在vm.videoData从API返回数据之后，vm.config似乎没有更新，或者至少属性视频数据没有收到更新。我已经应用了范围。$ 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>

该指令没有控制器。

Answer 1

我在vm.isValid（）中移动了vm.config。然后我改变了

<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接收更新，但至少它解决了我的问题。

指令中的属性更改未反映

1 个答案: