指令中的属性更改未反映答案

【问题标题】：Attribute changes in directive not reflected指令中的属性更改未反映
【发布时间】：2016-04-13 23:56:39
【问题描述】：

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

<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>

指令没有控制器。

【问题讨论】：

你如何更新videoPlayer.template.html上的值？
@Lex 使用 videoData
尝试在指令模板上使用控制器作为语法并添加 bindToController: true 和 controller: 'tumblrLink as vm' （或任何你的控制器名称 - 很难说，因为你没有在你的问题中显示）你的指令。我认为问题在于您正在尝试混合使用 controller as 和 $scope 并且它正在创建一个指令本地的隔离范围。
@Lex，该指令没有控制器。控制器用于使用 video-player 指令的模板。当我在控制器中手动设置 vm.config.plugins.poster 时，该指令收到了新的更新。但是当将 vm.config.sources[0].src 设置为某个值时，指令没有得到它。所以我认为这与范围问题无关。

标签： angularjs videogular

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

【讨论】：