Script loading in "partial" HTML snippet

Showing 1-10 of 10 messages
Script loading in "partial" HTML snippet Thomas 6/21/11 5:11 AM
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>
...
Re: [angular.js] Script loading in "partial" HTML snippet Igor Minar 6/21/11 10:36 AM
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.


Re: Script loading in "partial" HTML snippet Thomas 6/22/11 3:33 PM
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

On Jun 21, 10:36 am, Igor Minar <iimi...@gmail.com> wrote:
> 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
>
>
>
>
>
>
>
Re: [angular.js] Re: Script loading in "partial" HTML snippet Igor Minar 6/23/11 7:46 AM
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
Re: [angular.js] Re: Script loading in "partial" HTML snippet Igor Minar 6/23/11 12:47 PM
btw this is related: https://github.com/angular/angular.js/issues/369
Re: Script loading in "partial" HTML snippet Thomas 6/23/11 2:24 PM
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
>
Re: [angular.js] Re: Script loading in "partial" HTML snippet Igor Minar 6/24/11 11:24 AM
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
Re: [angular.js] Re: Script loading in "partial" HTML snippet az...@asiatravelport.com 10/19/12 10:40 AM
Any good resolution on this, i'm facing the same problem. Angular doesn't kick in controller inside the partial page.
Re: [angular.js] Re: Script loading in "partial" HTML snippet az...@asiatravelport.com 10/20/12 2:29 AM
Guys, something to share.
http://stackoverflow.com/questions/12987001/loading-partial-page-with-angular-and-compile-the-controller
Re: Script loading in "partial" HTML snippet Robert Christian 11/4/13 4:40 PM
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.   :)