0

I'm fairly new to Angular and could use some help about the order in which things load.

I have two directives. A parent directive (resume-list) and a child directive (slick-slider). My problem is that the attribute (data-source-fn) of the child directive executes before the parent's controller where that fn is defined. This results in an error in the console = "Possibly unhandled rejection: undefined" - and the slides to the slick slider never load:

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

Now I've tried three different ways to solve this issue, but keep getting the same error. However, when I make the parent directive into a Component with typescript - everything works fine. So, my question is... is it possible to have the parent as a Directive that has the data to pass to it's child?

What I've tried for the Parent Directive:

 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

All three of the above give me the same error: "Possibly unhandled rejection: undefined" .... which when I debug in the console the undefined object ends up being the data-source-fn...

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
Crystal
  • 1,425
  • 1
  • 22
  • 34
  • Could you execute the fn in the constructor of the `slick-slider` typescript code? – Sonu Kapoor Dec 09 '17 at 21:40
  • Initialization logic that relies on bindings being present should be put in the controller's `$onInit()` method, which is guaranteed to always be called after the bindings have been assigned. – georgeawg Dec 10 '17 at 10:37
  • When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – georgeawg Dec 10 '17 at 22:39
  • Possible duplicate of [Difference between the 'controller', 'link' and 'compile' functions when defining a directive](https://stackoverflow.com/questions/12546945/difference-between-the-controller-link-and-compile-functions-when-definin?rq=1). – georgeawg Dec 10 '17 at 22:40

1 Answers1

0

Initialization logic that relies on bindings being present should be put in the controller's $onInit() method, which is guaranteed to always be called after the bindings have been assigned.

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

As a directive:

app.directive('myDirective', {
  scope: {value: '<'},
  controller: function($scope) {
    this.$onInit = function() {
      // `$scope.value` will always be initialized,
      $scope.doubleValue = $scope.value * 2;
    };
  }
})
georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Hi George thank you for the response. I know it's possible to do as a component. My question is, is it possible to do as a directive? At my work I created it as a component... they want it as a directive. I've tried three different ways of implementing as a directive and they don't load the same way as the Component. – Crystal Dec 10 '17 at 22:01