【问题标题】:Why can't my directive inherit a function from its parent scope?为什么我的指令不能从其父范围继承函数?
【发布时间】:2016-04-10 11:03:52
【问题描述】:

我创建了一个指令,它应该从其父范围继承某些东西。

我使用了 scope{...} ,但它只接收常规变量。 functions 似乎不起作用。

另外,我使用的是 Angular 1.4,所以我使用 "vm = this;" 而不是 "$scope"

angular
    .module('player')
    .controller('MediaPlayerController', MediaPlayerController)
    .directive('sessionInfo', sessionInfo);

    function MediaPlayerController($sce, $timeout) {
      var vm = this;
      vm.setSourceIndex = setSourceIndex;
      vm.playerConfig ={};

      vm.session = {
        sessionName: 'SAT',
        sections: [
          {
            sectionId: 0,
            sectionName: 'SAT-1',
            sources: [
              {src: $sce.trustAsResourceUrl("videogular.mp4"), type: "video/mp4" }
            ]
          },
          {
            sectionId: 1,
            sectionName: 'SAT-2',
            sources: [
              {src: $sce.trustAsResourceUrl("big_buck_bunny_720p_h264.mov"), type: 'video/mp4'}
            ]
          }
        ]
      };

      function setSourceIndex(index) {
        vm.playerConfig.sources = vm.session.sections[index].sources;
      };
    }

    function sessionInfo() {
      return {
        restrict: 'AE',
        scope: {
          sections: '=',
          setSourceIndex: '&'
        },
        template: '<li ng-repeat="section in sections"><div ng-click="setSourceIndex({{section.sectionId}})">{{section.sectionName}}</div></li>'
      }
    }
<div ng-controll="MediaPlayerController as meidaPlayer">
    <div class="playerSide">
      <ul session-info sections="mediaPlayer.session.sections" setSourceIndex="mediaPlayer.setSourceIndex(index)"></ul>
    </div>
</div>

我错过了什么吗?有人可以帮帮我吗?

【问题讨论】:

  • ng-controll 应该是 ng-controller。正如下面的答案所述,您的角度语法有很多问题

标签: javascript angularjs angularjs-directive scope


【解决方案1】:

这里有多个问题

  • setSourceIndex 应该用破折号书写:set-source-index。我什至不确定它在这里是否有目的,因为您不是从指令中调用它。

  • 你写的是meidaPlayer而不是mediaPlayer

  • 您没有为指令设置控制器。然后该控制器应该与指令的属性进行交互。

【讨论】:

  • 可以在没有指令控制器或链接功能的情况下完成。最后一行并不完全准确
猜你喜欢
  • 1970-01-01
  • 2016-01-13
  • 2014-05-20
  • 1970-01-01
  • 1970-01-01
  • 2022-09-27
  • 2013-10-07
  • 1970-01-01
  • 2023-04-04
相关资源
最近更新 更多