In my directive template I have
<div id="chartdiv-{{name}}" style="width:100%;height:100%"></div>
where name is variable and assigned to each directive when it is created.
The chart is created with
$('#chartdiv-'+scope.name).highcharts(settings);
But this doesn't work. Everything works fine if I don't use the name variable. Any ideas?
Change it like this,
<div id="{{ 'chartdiv-' + name }}"></div>
EDIT
If you are creating template inside a directive, it should be
<div id="chartdiv-{{$scope.name}}"></div>
Related
I am creating a directive in which template I need to use the a scope's variable value as the name of the directive (or alternatively controller) to load.
Say I have a directive widget that has a template called widget.html which looks like:
<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
<div class="navBar">
<div ng-include="widget.type + '-t.html'"></div>
<i class="fa fa-close"></i>
<hr>
</div>
<div ng-include="widget.type + '-f.html'"></div>
</div>
Now widget.type is not getting evaluated in the first line. It works fine for ng-include. Say widget.type's value is weather. The first line should then be interpolated first to look like (doesn't matter if class attribute, widget.type-attr or ng-controller is interpolated)
<div class="widget" weather>
and then compiled to include the weather directive.
How can I get widget.type interpolated in the template?
Not an option is to use ng-include to load the directive. I need to use one common template for the widget and want to add/override/extend the base directive with additonal functionality/Variables.
If this is not the way to achieve that, is there a way to extend a directive the OOP-way?
See the plunkr
You can only place interpolation expressions in text nodes and attribute values. AngularJS evaluates your template by first turning it into DOM and then invoking directive compilation, etc. If you try to place {{...}} instead of attribute name, you'll just end up with messed-up DOM.
If you really need to replace a whole directive based on $scope variable value, you'll need to create a directive for application of other directives and do some heavy lifting with $compile (you'll have to completely re-compile the template each time the value changes). I'd recommend trying to find other designs solving your situation before attempting this.
For adjusting your template based on element attributes, see this answer.
I have a controller who changes its view using 2 ng-include( tried both file and script). One for view and other for edit screen.
<div class="content-area">
<div class='row'>
<div class="cs-info">
<fp-info-bar config="headerConfig"></fp-info-bar>
<ng-include src="currentTemplate"></ng-include>
</div>
</div>
View template do not have inputs. The edit template have a form, 4 ng-form which them self contain inputs and custom directives.
<ng-form name='premisesAddressForm' attempt>
<div has-permission='CustomerDetailEditOverrideAddressValidation'>
<input type="checkbox" ng-model="isPremisesAutoCorrectDisabled"><span>Turn off Auto Correct</span>
</div>
<fp-address-edit
states="states"
ng-model='customer.PremisesAddress'
on-change="validateAddress(customer.PremisesAddress, premisesAddressForm, isPremisesAutoCorrectDisabled)">
</fp-address-edit>
</ng-form>
Data gets successfully populated and other things works fine too with in directive in edit mode.
Problem: When i try to save data on parent controller and check scope, i do not find any form(premisesAddressForm) or other input fields on edit template. i.e. this $scope.premisesAddressForm do not exist. Just to make clear, the save button is on same template and is bind to function on parent controller, no problems with that. I tried creating objects with in parent controller like this but no use.
$scope.forms = {};
<ng-form name='froms.premisesAddressForm' attempt>
I know ng-include create its own scope (inherit form parent) but i am not trying to get parent objects on child so no issues there. I also read some where that after ng-include changes, Angular compiles and updates the scope. To me there lies the problem. How i supposed to make it work? If my approach is wrong all together, please feel free to point out. My objective is to use same controller for different views, with different inputs or none. Thanks
You're correct that ngInclude creates a new child scope. The problem is that the parent scope will not have access to child scoped properties. What you could do is the same thing you tried, but instead of passing the form back to the parent controller, you should pass the values back.
In your parent controller:
$scope.myObj = {
customer: {}
};
In your template:
<ng-form name='premisesAddressForm' attempt>
<div has-permission='CustomerDetailEditOverrideAddressValidation'>
<input type="checkbox" ng-model="myObj.isPremisesAutoCorrectDisabled"><span>Turn off Auto Correct</span>
</div>
<fp-address-edit
states="states"
ng-model='myObj.customer.PremisesAddress'
on-change="validateAddress(myObj.customer.PremisesAddress, premisesAddressForm, myObj.isPremisesAutoCorrectDisabled)">
</fp-address-edit>
</ng-form>
If you need for the controllers to communicate during saving (e.g. kick off validation), you could use events.
I've just started looking at AngularJs. I was attempting to use a custom directive inside a tr element. I get the following error regarding the switch directive
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
Some sample code is here: http://plnkr.co/edit/YiSFYK5l8mNIlBo6OGFW
Even after I removed the swtich it still doesn't seem to do anything. I changed the repeat direct to be over currentSheetData and removed the swtich entirly but there's no code in the rows.
However in my example I do the same setup inside a div element and it works fine. Would someone explain what I'm doing incorrectly
You need ng-switch directive on the parent node before declaring ng-switch-when on the child node.
Example:
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngSwitch
PROBLEM
I have a dom element, which i want to detach it from its parent and append it at some other location in the dom, angularjs way.
i could easily do this in jquery with detach and appendto, but i am unable, to find the same in angularjs way.
var detached = jQuery('.toBeDetached');
jQuery('.itemMaximixed').append(detached);
Note i need to detach since the element contains a map in it.
It may not be applicable in your case, but you can use the transclude facility of an Angular directive to do this.
I don't think attaching and deattaching would work. What I can suggest is destroying the recreating the template under different node.
You can use something like ng-if in Angular 1.1.5 for this. Using multiple ng-if and associated conditions you can bind the same template at multiple location, which ever ng-if returns true that template would get loaded.
The template code can be duplicated or be out inside a ng-template script. Something like this
<div id='parent'>
<div id='child1'>
<div ng-if='condition1'><ng-include src='datatemplate' /></div>
</div>
<div id='child2'>
<div ng-if='condition2'><ng-include src='datatemplate' /></div>
</div>
</div>
<script id='datatemplate' type='text/ng-template'>
<!-- Template HTML -->
</script>
The Select tag I am using in conjunction with ng-switch does not properly display nor function properly after being set once.
<select ng-model="visuals" ng-options="visual for visual in visuals">
See JSFiddle:
http://jsfiddle.net/timothybone/UaFuc/3/
Thanks in advance!
:D
You should not bind visuals using ng-model as it is the list of items. Setting it replace the list value by the chosen item (which is a list of characters). Causing the strange behaviour.
<select ng-model="item" ng-options="visual for visual in visuals">
This new variable must be declared in the scope. It is also used to set an initial value:
$scope.item = 'none';
Your switch usage was also wrong, you need en enclose condition in the switching block.
<div ng-switch on="item">
<span ng-switch-when="lots">Youtube</span>
<span ng-switch-default></span>
</div>
If you want to set the content of the HTML using ng-bind-html-unsafe you should provide a variable as parameter (not sure how you could inject javascript that way).
<span ng-switch-when="lots" ng-bind-html-unsafe="youtube">Could not evaluate 'youtube' variable</span>
The span content is then replaced. Of course a new variable must be defined in the scope to hold the HTML content:
$scope.youtube = "<hr/>This is an HTML content<hr/>";
I updated the jsFiddle: http://jsfiddle.net/PMpLa/4/