What is the best way to defer the instantiation of a particular controller (not a route) in your

Question

What is the best way to defer the instantiation of a particular controller (not a route) in your

What I'm looking for is a directive that functions like a typical ng-controller, but I need it to be invoked only after a promise has been resolved. To achieve this in HTML, it could be implemented as such:

<div ng-controller="myCtrl" ctrl-promise="p">

Where "p" represents any promise within the parent scope. I am aware of the method to delay the instantiation of a controller for a specific route (as discussed in this answer: Angular.js delaying controller initialization), however, I would prefer to set this on a per-controller basis rather than per route. While I could use ng-if with "p" as an attribute, I am curious if there is another approach?

javascript angularjs model-view-controller asynchronous promise

Answer 1

Answer №1

If you wish for the content inside the div to exist without being controlled by the controller until the promise is resolved, here is a solution:

Check out this customized directive that generates a controller upon promise resolution:

angular.module('myApp')
.directive('delayController', function($controller, $q) {
  return {
    scope: true,
    link: function(scope, elm, attr) {
      $q.when(scope.$parent.$eval(attr.delayControllerPromise)).then(function() {
        var ctrl = $controller(attr.delayController, {
          $scope: scope
        });
        elm.children().data('$ngControllerController', ctrl);
      });
    }
  };
});

Here's how you can implement it:

<div delay-controller="MyCtrl" delay-controller-promise="myPromiseExpr()">
</div>

Answer 2

If you wish for the content inside the div to exist without being controlled by the controller until the promise is resolved, here is a solution:

Check out this customized directive that generates a controller upon promise resolution:

angular.module('myApp')
.directive('delayController', function($controller, $q) {
  return {
    scope: true,
    link: function(scope, elm, attr) {
      $q.when(scope.$parent.$eval(attr.delayControllerPromise)).then(function() {
        var ctrl = $controller(attr.delayController, {
          $scope: scope
        });
        elm.children().data('$ngControllerController', ctrl);
      });
    }
  };
});

Here's how you can implement it:

<div delay-controller="MyCtrl" delay-controller-promise="myPromiseExpr()">
</div>

What is the best way to defer the instantiation of a particular controller (not a route) in your

Answer №1

Similar questions

What is the Proper Way to Add Inline Comments in JSX Code?

Setting the cache to false during an httpget request in an mvc4 controller action: tips and tricks

Using a Typescript variable prior to its assignment

Mastering the ins and outs of ngStorage in AngularJS

What is the best way to determine the height of a DIV element set to "auto"?

Utilize styled-components in next.js to import and resize .svg files seamlessly

Retrieve information from a JSON file within a Vue.js application rather than entering data manually

Express: How to Define Route Parameters from the Client Side

Looking to tweak the date format in a Vue.js template?

Sending images as a base64 string from a Titanium app to a Ruby on Rails web service

Navigate through a series of div elements using Jquery

Angular 2 has its own version of $q.when called RxJs

Enhancing the camera functionality of the HTML <input> tag for iPhone and Android devices

What is the best way to access a post request value from one JavaScript file to another in a Node.js environment

Utilizing Data Filters to Embed HTML in Vue.js?

Implementing a persistent header on a WordPress site with Beaver Builder

Utilizing MongoDB's object within the mapper function in MapReduce

Invalid element type detected. A string was expected, but instead found undefined

AngularJS not swapping the data-url with the scope URL provided in {{ uploadUrl }}

Display data as a JSON object using Highcharts