Script loading in "partial" HTML snippet

16,331 views
Skip to first unread message

Thomas

unread,
Jun 21, 2011, 8:11:35 AM6/21/11
to angular
To test dynamic loading of DOM fragments/partials, I modified the deep
linking cookbook example to specify and load the controller withing
the fragment, rather than in the route/link. I would like to have
markup and controller binding in a single place.

Removing controller:XYZ property from route and into ng:controller
attribute of the snippet works fine. But script loading fails, it
appears that the script tags are stripped off? Is there another
solution to this?

settings.html:

<script>
alert("fragment loaded");
</script>

<div ng:controller="SettingsCntl">

<label>Name:</label>
<input type="text" name="form.name" ng:required>
...

Igor Minar

unread,
Jun 21, 2011, 1:36:00 PM6/21/11
to ang...@googlegroups.com
long story short: it's because the script tag is special and angular doesn't treat it as such. if you include jquery on this page, the code should work.

When angular detects jquery, it will use it for dom manipulation and jquery is smart enough to treat the script tag as special.

In any case, why would you want to load javascript code like this?

cheers,
Igor



--
You received this message because you are subscribed to the Google Groups "angular" group.
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.


Thomas

unread,
Jun 22, 2011, 6:33:50 PM6/22/11
to angular
Hi Igor,

Thanks for the reply, with jquery included my test app works as
anticipated!

Why load JavaScript like this? I'm looking for a way to keep the
application modular. Right now it is a small test, but in a large
application I would like to be able to separate along functional
boundaries. Consider the case of "partials" that share nothing but a
common application frame and the browser window object. I would like
to keep the corresponding source artifacts separate and only load them
when needed. So instead of pulling all controller JavaScript when the
document is instantiated, pull it as the user actually visits the
"partial", by referencing it in the corresponding HTML snippet.

Is there any other/better way to accomplish the same with angular?

Cheers,
Thomas


that does not have any other dependency

Igor Minar

unread,
Jun 23, 2011, 10:46:28 AM6/23/11
to ang...@googlegroups.com
I see. That's an interesting use case and I was kind of suspecting that you were trying to do that, but I wasn't sure.

my question is: what's the code that you load this way? Don't you need to have the js code for the view before the view is rendered?

/i

Igor Minar

unread,
Jun 23, 2011, 3:47:15 PM6/23/11
to ang...@googlegroups.com

Thomas

unread,
Jun 23, 2011, 5:24:58 PM6/23/11
to angular
That would be the controller code for the partial. Let's say the app
has an admin screen to manage users. The corresponding partial is a
master/detail CRUD dialog/screen. The HTML snippet would contain the
markup and the script tag to load the controller dealing with fetching
the data etc. The same is only needed for the partial area, nowhere
else.

In the augmented example:

<script>
function SettingsCntl2(){
this.cancel();
}
SettingsCntl2.prototype = {
cancel: function(){
this.form = angular.copy(this.person);
},

save: function(){
angular.copy(this.form, this.person);
window.location.hash = "#";
}
};
</script>

<div ng:controller="SettingsCntl2">

<label>Name:</label>

...


On Jun 23, 7:46 am, Igor Minar <iimi...@gmail.com> wrote:
> I see. That's an interesting use case and I was kind of suspecting that you
> were trying to do that, but I wasn't sure.
>
> my question is: what's the code that you load this way? Don't you need to
> have the js code for the view before the view is rendered?
>
> /i
>
>
>
>
>
>
>
> On Wed, Jun 22, 2011 at 3:33 PM, Thomas <thomas.we...@googlemail.com> wrote:
> > Hi Igor,
>
> > Thanks for the reply, with jquery included my test app works as
> > anticipated!
>
> > Why load JavaScript like this? I'm looking for a way to keep the
> > application modular. Right now it is a small test, but in a large
> > application I would like to be able to separate along functional
> > boundaries. Consider the case of "partials" that share nothing but a
> > common application frame and the browser window object. I would like
> > to keep the corresponding source artifacts separate and only load them
> > when needed. So instead of pulling all controller JavaScript when the
> > document is instantiated, pull it as the user actually visits the
> > "partial", by referencing it in the corresponding HTML snippet.
>
> > Is there any other/better way to accomplish the same with angular?
>
> > Cheers,
> > Thomas
>

Igor Minar

unread,
Jun 24, 2011, 2:24:25 PM6/24/11
to ang...@googlegroups.com
I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case. It doesn't make sense for us to rewrite one third of jquery to get this working in jqlite.


/i

az...@asiatravelport.com

unread,
Oct 19, 2012, 1:40:46 PM10/19/12
to ang...@googlegroups.com
Any good resolution on this, i'm facing the same problem. Angular doesn't kick in controller inside the partial page.

az...@asiatravelport.com

unread,
Oct 20, 2012, 5:29:17 AM10/20/12
to ang...@googlegroups.com, az...@asiatravelport.com

Robert Christian

unread,
Nov 4, 2013, 7:40:06 PM11/4/13
to ang...@googlegroups.com, thomas...@googlemail.com
Despite the suggestion to "use jquery" this is still evading me.  I wrote up the issue on SO here:  http://stackoverflow.com/questions/19779687/dynamically-loading-angularjs-modules-from-within-templates-views .

@Igor - An elaboration/example would be most helpful.   :)
Reply all
Reply to author
Forward
0 new messages