Initialize a dynamic ng-controller?

[ItsLeeOwen]

How do you initialize a view that isn't present in the dom at page load?

[ItsLeeOwen]

I'm hoping for either an angular method to apply a controller to an element like:

angular.init( $('<div ng-controller="someClass") );

or some direction on how to go about dynamically loading child views with angular.

[Robert B. Weeks]

Hello -

> I'm hoping for either an angular method to apply a controller to an element like:
>
> angular.init( $('<div ng-controller="someClass") );
>
> or some direction on how to go about dynamically loading child views with angular.
>

Not sure if this is what you are looking for - but you can use 'angular.bootstrap(element, []);' - and use the array to pass in modules needed to bootstrap a specific dom element. We do this for apps that are pulled in via xhr loading and bootstrap them when they are done loading inside of an existing page.

Works great. Hope that helps in what you were asking.

--
Robert B. Weeks

[ItsLeeOwen]

You're the best, thank you!!!

http://jsfiddle.net/ItsLeeOwen/LHxKB/

[ItsLeeOwen]

What led you to discovering this bootstrap method?  I haven't seen it referenced in the API Reference.  I'd like to read more about it.

http://docs-next.angularjs.org/guide

[ItsLeeOwen]

I found this documentation on the bootstrap method:  https://github.com/angular/angular.js/blob/master/docs/content/guide/dev_guide.bootstrap.manual_bootstrap.ngdoc

[ItsLeeOwen]

Do you know of a way to reference the controller instantiated by the bootstrap method?

var myController = angular.bootstrap( element ) ?

[Vojta Jína]

angular.bootstrap(element, modules) returns injector, so you can get hold of anything that is being injected (services, filters, ....)

you can get hold of the related scope/controller per element:

angular.element(someElement).scope()

angular.element(someElement).data('$ngControllerController')

or if you are using jQuery:

$(elm).scope()

If you want it for debugging, in Chrome/FF, you can select element in the WI and then, this selected element can be accessed in the console as $0, so you can inspect any element and its scope/controller simpy by:

$($0).scope()

$($0).data('$ngControllerController')


V.

On Sat, Apr 7, 2012 at 11:54 AM, ItsLeeOwen <l...@coderebelbase.com> wrote:

Do you know of a way to reference the controller instantiated by the bootstrap method?

var myController = angular.bootstrap( element ) ?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/VzY5Wovd91EJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ItsLeeOwen]

This is VERY HELPFUL info, thank you Vojta.  Searching the docs for "scope()" also led me to the "controller()" method here:  http://docs-next.angularjs.org/api/angular.element

[Vojta Jína]

Hmmm, I didn't know we had .controller() method :-D

All these methods are just calls to .data().

With .data($<someDirective>Controller') you can get hold of any other controller (any directive can create a controller, e.g. form or ng-model do).

Note, this should be used only for debugging.

If you want to communicate between directives (have access to some other directive's controller) use "require":

.directive('thatAccessNgModelController', function() {

  return {

    require: 'ngModel', // means this directive can't exist without ng-model on the element

    link: function(scope, elm, attr, CTRL) {}

  };

});

You should avoid touching DOM from controllers. This communication should happen through binding. (Directive watch binding and updates the DOM, controller only works only with the model and it's easy and fast to test the controller).

Hope this makes a sense.

V.

On Sat, Apr 7, 2012 at 12:44 PM, ItsLeeOwen <l...@coderebelbase.com> wrote:

This is VERY HELPFUL info, thank you Vojta.  Searching the docs for "scope()" also led me to the "controller()" method here:  http://docs-next.angularjs.org/api/angular.element

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/ZP7xu5zcZ2MJ.