CODEWITHSUNDEEP
angularjs
Jim
Jim

Reputation: 16022

$postLink not called in angular 1.5 component

Given the following:

var Panda;
(function (Panda) {
    "use strict";
    var BulkCaptureComponentController = (function () {
        function BulkCaptureComponentController() {
            this.textBinding = '';
            this.dataBinding = 0;
        }
        BulkCaptureComponentController.prototype.$onInit = function () {
            console.log('init');
        };
        BulkCaptureComponentController.prototype.$postLink = function () {
            alert('1');
        };
        BulkCaptureComponentController.prototype.add = function () {
            this.functionBinding();
        };
        return BulkCaptureComponentController;
    }());
    var BulkCaptureController = (function () {
        function BulkCaptureController() {
            this.value = 0;
        }
        BulkCaptureController.prototype.$postLink = function () {
            alert('1');
        };
        BulkCaptureController.prototype.$onInit = function () {
            console.log('init');
        };
        BulkCaptureController.prototype.add = function () {
            this.value = this.value + 1;
        };
        return BulkCaptureController;
    }());
    var BulkCaptureComponent = (function () {
        function BulkCaptureComponent() {
            this.bindings = {
                textBinding: '@',
                dataBinding: '<',
                functionBinding: '&'
            };
            this.controller = BulkCaptureComponentController;
            this.templateUrl = '/areas/schedule/views/bulkcapture/bulk-capture.html';
        }
        return BulkCaptureComponent;
    }());
    Panda.panda.component('bulkCaptureComponent', new BulkCaptureComponent());
    Panda.panda.controller("BulkCaptureController", BulkCaptureController);
})(Panda || (Panda = {}));
;

Why is $postLink never called by angular.

My template (for now) just contains html content. Both init methods work perfectly, but $postLink is not called.

Upvotes: 2

Views: 1699

Answers (1)

Estus Flask
Estus Flask

Reputation: 222760

Some new lifecycle hooks (including $postLink) were added in Angular 1.5.3

  • $onChanges(changesObj) - Called whenever one-way bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form { currentValue: ..., previousValue: ... }. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value.
  • $onDestroy - Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers.
  • $postLink - Called after this controller's element and its children been linked. Similar to the post-link function this hook can be used to set up DOM event handlers and do direct DOM manipulation. Note that child elements that contain templateUrl directives will not have been compiled and linked since they are waiting for their template to load asynchronously and their own compilation and linking has been suspended until that occurs.

They are not available in previous 1.5.x versions.

Upvotes: 5

Related Questions