Question

我有一个角度（js）组件，它可以呈现可选择的选项。

<my-select options="mainVm.options"></my-select>

以下是组件模板：

<a href ng-repeat="option in mySelectVm.options" ng-click="mySelectVm.select(option)">{{option.label }}</a>

在某些情况下，我需要使用转换，以便我可以更好地控制选项的显示方式。理想情况下，这就是它想要的：

<my-select>
    <options-template>
        <a href ng-repeat="option in mainVm.options" ng-click="mySelectVm.select(option)">{{ option.label }} ({{ option.altLabel }})</a>
    </options-template>
</my-select>

但是，我不确定是否可以实际访问mySelect组件内的select()函数。此时mySelectVm没有上下文。有没有其他方法可以在组件外部重用select()函数？

Plunker示例：

https://plnkr.co/edit/2N1oGLGQFPZiY6BnIqMl?p=preview

Answer 1

我最终选择了这个解决方案..

bindings: {
  ...
  vmForTemplate: '=?',
},
controller: function Controller() {
  var vm = this;

  vm.$postLink = function() {
    vm.vmForTemplate = vm;
  };

  vm.select = function(option) {
    vm.selectedOption = option;
  };
},

组件模板：

<my-select vm-for-template="mySelectVm">
  <options-template>
    <a href ng-repeat="option in mainVm.options" ng-click="mySelectVm.select(option)">{{ option.label }} ({{ option.altLabel }})</a>
  </options-template>
</my-select>

Plunker示例：

https://plnkr.co/edit/ckLAZXH7XLrahmyP1T75?p=preview

从transclusion中调用组件的功能

1 个答案: