Angularjs: How to Run Additional Code After Angularjs Has Rendered a Template

AngularJS: How to run additional code after AngularJS has rendered a template?

This post is old, but I change your code to:

scope.$watch("assignments", function (value) {//I change here
  var val = value || null;            
  if (val)
    element.dataTable({"bDestroy": true});
  });
}

see jsfiddle.

I hope it helps you

AngularJS: callback after render (work with DOM after render)

Create a directive that runs your code in the link function.
The link function is called after the template is built.

See ng-click to get an idea.

Execute a Jquery plugin after AngularJS has been rendered

Personally, I'd watch the list variable for any changes, and when a change is detected, I'd call the refresh method from the multiselect plugin.

In your controller:

// Initialize the multiselect before anything else.
$('#channels').multiSelect();

// Add a watch on the list. Notice this uses the $timeout
// service, so you'll have to add that to your controller.
$scope.$watch('list', function(){
  $timeout(function(){
    $('#channels').multiSelect('refresh');
  });
});

Full Plunker: http://plnkr.co/edit/FRpy2aEZUu9csUoKJYZO

AngularJS 1.5 component Trigger function after template fully rendered

Maybe you need different approach?

I mean if you already have all data in parent component, and you can't trigger resizeHeight after ng-repeat ends

<div class="container></div>

And some css flexboxes

 .container {
   display: flex;
   flex-wrap: wrap;
} 

That makes all divs equal heights

But there is also some bad workaround like:

In parentComponent

 setTimeout(function(){
   //Do resize

   scope.$apply();
 }, 0)

Also I remember that thing:

In your childComponent that ng-repeated you can access

if (scope.$last){
  // do resize 
}

Compile directive before template is rendered

Scratch what I had before.

[Edit 2]

Using a dynamic model is a bit problematic trying to fit it into the normal Angular workflow.
Instead you will need to compile the template in the directive by hand but add the ng-model before doing so, You will also need to manage the replacement of the existing element with the built template.

module.directive('stateDropdown', function (StatesFactory, $compile) {

    var template = '<select ng-options="state.abbreviation as state.name for state in states" class="form-control"></select>';
    return {
        scope: true,
        controller: function($scope) {
            $scope.states = StatesFactory.states;
        },
        compile: function($element, $attrs) {
            var templateElem = angular.element(template).attr('ng-model', '$parent.' + $attrs.stateModel);
            $element.after(templateElem);
            $element.remove();
            var subLink = $compile(templateElem);
            return {
                pre: function(scope, element, attrs) {
                    subLink(scope);
                },
                post: function(scope, element, attrs) {
                }
            }
        }
    };

});

A working example of this can be found here: http://jsfiddle.net/u5uz2po7/2/

The example uses an isolated scope so that applying the 'states' to the scope does not affect existing scopes. That is also the reason for the '$parent.' in the ng-model.

---

Related Topics