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

Ember, rendering content in a dynamic template

I'm running into a bit of a brick wall with how to render content inside some dynamic HTML content which I don't control, with Ember v1.13.1. In this particular scenario, I'm getting a navigation head, and navigation foot from a service call and putting them in my component:
export default Ember.Component.extend({
// I don't control these. They come from somewhere else
bodyStart: '<div class="header">...</div><div class="contentBody">',
bodyEnd: '</div><footer>...</footer>',
});
So, in my component template, I'm trying to do something like:
{{{bodyStart}}}
{{yield}}
{{{bodyEnd}}}
I would expect the yield content to be placed inside a <div class="contentBody"> element, but it's not. Instead content body is closed before the {{yield}}, and the bodyEnd closing div is ignored.
It's possible I'm just missing something obvious. Any ideas on how to solve this would be greatly appreciated.
Cheers

I believe what happens is that each {{{variable}}} is constructed independently and independently inserted into the DOM, which leads to unclosed DOM nodes that gets closed. The only way I can think of is to include the template compiler and recompile the template with bodyStart and bodyStop.
App.ContentWrappedComponent = Ember.Component.extend({
startBody: '',
endBody: '',
layout: function(){
return Ember.HTMLBars.compile(
this.get('bodyStart') +
'{{yield}}' +
this.get('bodyEnd')
);
}.property('bodyStart', 'bodyEnd')
});
You also need to add to your Brocfile.js:
app.import('bower_components/ember/ember-template-compiler.js');
JSBin: http://emberjs.jsbin.com/ticituxapa/3/edit?html,css,js,output

Unable to render an angularjs template inside a popover

I am trying to get a popover show some html content (it could be angularjs compiled content) and when I click on my "View" link, I do not see my custom directive getting processed and showing correctly (all other content is rendering okay including one that has an ng-repeat inside it suggesting that angularjs saw my angular content right)
http://plnkr.co/edit/Jy8Qlp1rsghwj4NNF2Dn?p=preview
<div ng-controller="ChordCtrl">
<chord-layout chord-matrix="{{matrix}}">
<div id="chordLayoutHolder"></div>
</chord-layout>
</div>
There is a lot going on in this plunkr but the bottom line is when I click on any of the "View" inside the table, I expect dynamic contents of report1.html to show up in my tooltip - Clearly all the other contents show up but it somehow failed to do my complex chord layout rendering - The chord layout diagram rendering is tested independently in another plunkr - http://plnkr.co/edit/q5DDdKHs11OuW6SfLtTG?p=preview
Any help in determining why my chord layout chart is not rendering would be helpful.
Regards

You're having issues because you're using id for your chordLayoutHolder. To be honest, I'm not sure why this is an issue. Perhaps Angular pre-compiles the template and clones it, such that the id is no longer unique. I would be curious to know.
In any case, remove <div id="chordLayoutHolder"></div> and just append to the directive element:
<chord-layout chord-matrix="{{matrix}}">
</chord-layout>
Then, in your directive, change the following lines (that refer to chordLayoutHolder):
$("#chordLayoutHolder").empty();
var svg = d3.select("#chordLayoutHolder")
...
to:
element.empty();
var domElement = angular.element(element)[0];
var svg = d3.select(domElement)
...
to append to the element itself, rather than another placeholder.
Then it would work. Here's the plunker.

Routes and Embedded View/Controller linking in Ember.js

Routing in Ember.js is troubling me, and I can't seem to find the "correct" way of doing what I want to do.
I have a route, let's call it #/map, which contains a series of top-level and containers of child views.
Hierarchically, I have a top map_view, which contains 4 additional views: A topbar (which has topbar menu item triggers within it), a sidebar (which has sidebar menu item triggers in it), and two containerViews (a sidebar menu containerView and a topbar menu containerView), which will contain one or more nested views that are programatically inserted on clicking a menu item trigger.
My issue is that while this works, and I can embed all of these views into their various templates, none of them are linking with controllers, and the controller they are picking up is the map_controller (which makes sense as that is the linked outlet controller for the top level view). Currently I am using a method described on Ember's github here, but it seems a little...hacky?
Here is a JSFiddle showing the problem. Notice that the controller for level-one-entry and level-two-entry is the index_controller: http://jsfiddle.net/fishbowl/Z94ZY/3/
Here are some code snippets for what I am doing to get around it:
map.hbs:
<section id='map'>
{{view App.SidebarView}}
{{view App.TopbarView}}
<div id='map-canvas'></div>
</section>
topbar_view.js:
var TopbarView = Em.View.extend({
templateName: 'topbar',
classNames: ['topbar-container'],
init: function() {
var content = this.get('content'),
controller = App.TopbarController.create({
view: this
});
this.set('controller', controller);
this._super();
}
});
module.exports = TopbarView;
topbar_controller.js
var TopbarController = App.ApplicationController.extend({
content: Ember.computed.alias('view.content'),
trigger: null,
start_date: null,
end_date: null,
travelling: null,
word: 'topbar'
});
module.exports = TopbarController;
I'm not doing anything special in the router other than declaring this.route('map'). A further problem i'm having is that whenever I declare needs: ['some_other_controller'], I get an error
<App.TopbarController:ember413> specifies 'needs', but does not have a container. Please ensure this controller was instantiated with a container.
Am I missing something blindingly obvious about how to go about linking these together. I'm guessing that i'm using routing incorrectly. I don't want to change what the URL is, as i'm technically not moving pages, just opening and closing menus on the page, but I don't really understand how else i'm supposed to use the router to achieve this.
EDIT 2: i've mocked up another jsfiddle of what I could do with outlets and link-to's, but i'm not sure that I want the URL changing (as you'd probably be able to do odd things with the back button etc): jsfiddle - The alternative to this is to set location: 'none' in the Router, but I don't really like that option either...

Emberjs reuseable modal

My goal:
I want to make a compact, reuseable modal. It should take a template name, and render in a modal,
What i got so far:
http://emberjs.jsbin.com/mehabivu/6/edit
How it works:
App.ApplicationRoute has an action, which takes a template name.
It renders it into {{ outlet modal }}
I can use this action
application wide, and reuse templates
My problem:
I dont know how to wrap the outlet into a div or something (to add
css), and show/hide it.
Maybe there is a better practice (component?)
to do this

Sounds like your on the right path. Pretty much exactly what Ember says to do in their cookbook: http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/
Wrapping/styling the modal can be done via the view you render into the outlet. Right now your menu2 template doesn't have a view.
App.Menu2View = Ember.View.extend({
tagName: 'section',
classNames: ['modal']
});
The above makes the containing tag a section and adds the modal css class to that container section.
I've updated your JSBin: http://emberjs.jsbin.com/mehabivu/7/edit