Develop Reference

change an angularjs nested template at run time

I have a template which is nested inside another template which I want to load when i click on a button.
So the nested template is loaded dynamically. This is what I have done so far.
This is the main body.html (this loads when a url is provided in the browser e.g. http://url#/newtemplate)
<div ui-view> </div>
Other section of the code has been removed for brevity
This is the new_template.html which I expects it to show when I click a button.
When I put a template name directly like below i.e. when I hard code it
<div ui-view="number1"></div>
It loads the template fully.
This is the dynamic model
<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}
The above does not load the template as I expected. but it shows the string number1 when
the button is clicked
What can I do for it to load the template....
This is my controller
.state('parent',{
url: '/newtemplate',
views:{
'':{
templateUrl: "parent.tpl",
contoller:"controller",
},
'number1#parent':{
templateUrl:"number1.tpl",
contoller:"formcontroller"
},
'number2#parent':{
templateUrl:"number2.tpl",
contoller:"formcontroller"
},
'number3#parent':{
templateUrl:"number3.tpl",
contoller:"formcontroller"
}
}
})
Strange enough when I used the dot notation it did not work so I have to use the absolute naming method.
I also noticed that when I added the nested views as shown above the time it takes before the template gets loaded take a very long time.
Please I would appreciate any help which can allow me to load a nested view at runtime (possibly very fast)
Expecting more answer
I still hope that the I can make use of ui-view/ui-router because of the ability to make use of controller.

I'm not sure you can use uiView to load html dynamically.
I would try another possible solutions:
Use directives
Using ngInclude
I'll leave you an example with ngInclude: https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview

Angular/Ionic hides data attributes (data-***) in the imported HTML through REST services

Within my Angular App, I am importing HTML through RESTful services. While all the HTML is properly retrieved, yet for some reason Angular hides the data attributes data-url or even id from each element.
Is there any reason behind that and can I stop that?
Thanks

In your controller add this:
$scope.to_trusted = function(html_code) {
return $sce.trustAsHtml(html_code);
}
And in your view:
<div class="EBScontent" ng-bind-html="to_trusted(what.body)"></div>

Insert html into div with angular keeping ui-router ui-sref property working

Here is my case:
I have a div which needs to get some html injected from a function:
<div ng-bind-html="myCtrl.getMyLink()"></div>
in my controller I have:
this.getMyLink = function () {
return '<a ui-sref="app.go.to.state1">my link</a>';
}
It works but not at all. All I have at the end in my html is only
<a>my link</a>
It's a link but the ui-sref redirection is not working.
There is surely something I'm missing.
How can I fix that?

ng-bind-html does not work with ui-sref directive. Just use href="path/to/state1" instead

The content inside ng-bind-html doesn't get compiled by angular, it is intended for static html.
You would need to use your own directive instead and either set a template or do your own compiling with $compile.
Alternatively you might be able to use ng-include. There aren't enough details given for your use case to help much more

angularjs directive is not loading

i tried to implement turn.js in angularjs app, when i click a link it takes to the page having that turn.js at that time my custom directive is not loading. If i press F5 then the custom directive is loading and turn.js is working propely.
My custom directive is like this
app.directive "turnJs", ->
alert "loaded"
restrict: "A"
link: (scope, element, attrs) ->
$(element).turn scope.$eval(attrs.turnJs)
return
and my view is like this
<div class="butiknamncontainer" id="magazine" turn-js>
<div>
dfdssdfs
</div>
<div>
sdffsdfsf
</div>
</div>
is there any way to load the directive while doing that ng-click??

You need to include the directive definition one the first page of your app so that Angular knows what to do when it encounters the directive in your HTML.
The reason it works when you refresh is because Angular is being bootloaded along with the directive definition(Look at the hashtag in the URL).
Whereas when Angular is bootloaded without that file, such as when there is nothing in your hashtag, Angular has no idea what to do when it later encounters that directive. So, it gets ignored.

HTML rendered in a Grails template does not get attached to the page source(DOM)

I have multiple tabs in my page and a single empty div below the tabs. I'm loading different grails templates into this div like the following
$('.project-content').load('<g:createLink controller="test" action="testDashboard" params=" [testInstance:applicationInstance.name]" />' + "/" + new Date().getTime() );
My controller handles this as follows:
def testDashboard(){
render template: 'testing/testTemplate', model: [applicationInstance: params.get('applicationInstance')],contentType: 'html'
}
The template itself has some html content within a div
Content to be displayed
The template does get rendered inside the div. However when i view the source for the page I cant find the template html source.
Can you please tell me how i can make this available? I need it to attach some events to testDiv
Thanks,
Nav

You will never find it in the html Source-Code because it isnt there.
Your Js that "loads" the templates is executed after the document (document==Sourcecode) is loaded. So You are manipulating the DOM by loading new content to it, to see it, just use the element-inspector of chrome or firebug for firefox.
If you want to attach events to the content, you have to delegate the selectors or you pass the relevant script to execute within the template, thats also possible.It will execute as soon as your template is successfully loaded.