dynamically compile newly loaded html code

[Bruce Ho]

I have a tough one for those who can look at this thing differently.

I am working angularjs into a GWT app. So mostly, the app is being manipulated (dynamically adding/editing html fragments) using gwt. 

what I want to do is once GWT added some new DOM, such as 

<mytag >{{ product.name }}</mytag>

where mytag is an E directive I wrote inside a directives.js.

of course, since the html fragment is loaded after angularjs initiation, I need to trigger compile and get angularjs to process the directive. 

the examples I have seen all working in pure angularjs, so the event that load the html fragment can send it thru compile. in my case, the fragment is added by non-angularjs code, how would I come back and activate the compile?

any one with ideas?

[Sander Elias]

Hi Bruce.

Angular is not keeping you from using javascript! so use Javascript to fetch the stuff you need out of the DOM, and hand it over to the $compile service.

if you create a plunk of fiddle illustration your problem, surely one of us will help you to get it to work.

Regards

Sander.

[Bruce Ho]

I don't see sample code for accessing angular code from out side of the controller or directive.

if I get the DOM by $(#myElement), I imagine I would start by calling app..... what exactly do I call to run it thru the compiler? How do I get hold of $compiler?

[Bruce Ho]

I found this link https://groups.google.com/forum/#!topic/angular/qhtpgsl22xE

I tried to follow

/* dynamically add the block with the directive to add the template */
$(element).html("<div ng-include src=\"'templates/templateDynamic1.html'\"></div>");

 

/* Get angular to process this block */
var fnLink = $compile(element);     // returns a Link function used to bind template to the scope
fnLink($scope);                     // Bind Scope to the template

I am not using the ng-include, because the external html is not fed from a template like that. if I simple grab the top element and call $compile(element), it says 

$compile is not defined. I don't know enough to post a plunker to get started.

On Fri, Nov 8, 2013 at 9:46 AM, Bruce Ho <bho...@gmail.com> wrote:

I don't see sample code for accessing angular code from out side of the controller or directive.

if I get the DOM by $(#myElement), I imagine I would start by calling app..... what exactly do I call to run it thru the compiler? How do I get hold of $compiler?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/uIMDvSPSmIM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Bruce Ho]

ok, injector worked

var $injector = angular.injector(['ng', 'myApp']);

  $injector.invoke(function($rootScope, $compile) {

    $compile(element)($rootScope);

  });

[Bruce Ho]

my success is incomplete.

the dynamically loaded html is

<div>{{ product.image }}</div><input type="text" ng-model="name">{{ name }}

immediately after I all the injector, the {{ product.image }} binding does not take effect. as soon as I type the first char into the input, then both {{ name }} and {{ product.image }} responds with binding. 

what else do I have to do to get the binding to respond upon injection of the compiler?

[Ryan Randall]

Why not post a plunk now you've got this far?

[Bruce Ho]

Well, I tried using plunker. for some reason, I can't even get jquery selector working on it. I am totally sure the code is good. the same code works on fiddle. if anyone knows the reason, I would love to hear.

but I did get this working by manually calling angular bootstrap after inserting the new html fragment. 

what I found out is, compile seems to work for the binding code, but does not trigger $watch on variables in ng-init. you need to call bootstrap for that. 

[javad bat]

you must use $rootScope.$digest(); at the end like example below: 

var $injector = angular.injector(['ng', 'TradingSystem']);


                        $injector.invoke(function ($rootScope, $compile) {


                            $compile($('#pageWrapper')[0])($rootScope);
                            $rootScope.$digest();


                        });

[Sander Elias]

Here, grab this plunk as a starting point.: http://plnkr.co/edit/tpl:bSBatno6Z85VMCtxF4KK?p=catalogue