Question

我对Angular很新，可以使用一些有关事物加载顺序的帮助。

我有两个指令。父指令（resume-list）和子指令（slick-slider）。我的问题是子指令的属性（data-source-fn）在父控制器之前执行，其中定义了fn。这导致控制台出现错误=＆＃34;可能未处理的拒绝：未定义＆＃34; - 并且光滑滑块的幻灯片永远不会加载：

<resume-list>
    <slick-slider
      data-page-size="3"
      data-scroll-size="3"
      data-page-buffer="3 + 1"
      data-total="slides.length"
      data-config="resumeConfig"
      data-theme="'theme-resume'"
      data-slide-template-url="'app/widgets/slickSlider/resume-slide-tpl.html'"
      data-source-fn="getResumeSlides(id, start, limit)">
    </slick-slider>
</resume-list>

现在我已经尝试了三种不同的方法来解决这个问题，但仍然会遇到同样的错误。 但是，当我使用typescript将父指令编入Component时 - 一切正常。所以，我的问题是......是否可以让父作为指令将数据传递给它的孩子？

我为父母指令所尝试的内容：

 1. Directive with Controller
 2. Directive with no Controller but a (pre) link function instead
 3. Directive with no Controller and a compile (pre) link function

以上三点都给出了同样的错误：＆＃34;可能未处理的拒绝：未定义＆＃34; ....当我在控制台中调试时，未定义的对象最终成为 data-source-fn ......

Answer 1

依赖于存在的绑定的初始化逻辑应放在控制器的$onInit()方法中，保证在分配绑定后始终调用该方法。

app.component('myComponent', {
  bindings: {value: '<'},
  controller: function() {
    this.$onInit = function() {
      // `this.value` will always be initialized,
      this.doubleValue = this.value * 2;
    };
  }
})

作为指令：

app.directive('myDirective', {
  scope: {value: '<'},
  controller: function($scope) {
    this.$onInit = function() {
      // `$scope.value` will always be initialized,
      $scope.doubleValue = $scope.value * 2;
    };
  }
})

是否可以让父指令定义一个函数，在子指令的模板属性调用该函数之前执行它？

1 个答案: