I have a binding problem when I use ng-directive.
I read some other post but I don't succedd bind variable in my ng-include.
<ng-include src="'template.html'"
ng-repeat="item in bloc.items"
onload="data=item; highlight=forceHighlight;"></ng-include>
forceHighlight is a scope variable who are well initialized but when the variable change in the controller, change are not passed into the template.
Here a fiddle to demonstrate my problem: http://jsfiddle.net/h24gtw51/2/
The goal is to have a template who display "text" or "zone" or "image", then if i click on the checkbox highlight i want display a border on "text"
I test to add controller in the ng-include but without success.
You don't need to manually bind the variable inside the include - your parent scope is automatically binded, so you can just access it. If you change your directive to use forceHighlight (ignore the onload assignment), your example will work :)
Look at this version of your fiddle.
Related
I have two directives that should both use isolate scopes, <outer-box> and <flag>. When I click on the <flag> directive, I want to change the background color of the other directive. Before importing my code into JSFiddle, I also had it working so that by default, a placeholder image appears in the flag directive, but once you click on that image, the country flag appears instead.
Can someone help with the styling a separate directive on ng-click?
Here's my code: https://jsfiddle.net/nLduw6xw/
(My countries data isn't working in JSFiddle for some reason)
You can do it with requiring one directive from another.
In this example you can require outer-box to be a parent of flag.
With this you have the access to required directive controller ( 4th parameter in link function), so you can call a method to set class on element.
Working JSFiddle : https://jsfiddle.net/2atnxhgy/
The following code displays/hides the content based on whether the check box is checked or not. Pl. tell me in detail how ng-model and ng-show directives are working together behind the scenes to produce the desired result.
<input ng-model="toggleDisplayHide" type="checkbox"/>
<div ng-show="toggleDisplayHide">Some text goes here ...</div>
The ng-show directive shows or hides the given HTML element based on the expression specified in the ng-show attribute. Is toggleDisplayHide an expression?
The ng-model directive binds the value of HTML controls to app data. Is toggleDisplayHide referring to app data here?
Is this something like this:
When the checkbox is checked, the ng-model sets the value of toggleDisplayHide to true. And ng-show comes to know that the value of the expression toggleDisplayHide is set to true, it displays the content.
Angular docs is a great place to know about those things and It's well documented as well. Just added some excerpt from the docs here:
ng-show
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).
Refer DOC
ng-model
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
ngModel is responsible for:
Binding the view into the model, which other directives such as
input, textarea or select require.
Providing validation behavior (i.e. required, number, email, url).
Keeping the state of the control (valid/invalid, dirty/pristine,
touched/untouched, validation errors).
Setting related css classes on the element (ng-valid, ng-invalid,
ng-dirty, ng-pristine, ng-touched, ng-untouched) including
animations.
Registering the control with its parent form.
Note: ngModel will try to bind to the property given by evaluating the
expression on the current scope. If the property doesn't already exist
on this scope, it will be created implicitly and added to the scope.
Refer DOCS
Based on that, Now to your question:
ng-show will evaluate the expression toggleDisplayHide in scope and if its truthy will display the DOM else will hide.
ng-model gives real taste of two way binding of the angularjs. The attribute provided to ngModel will bind to the respective scope property. If the property does not exist in the scope, angularjs will create automatically. So attribute should be a scope property at the end
ng-show simply hide/show some html content depending on the expression provided to the ngShow attribute. The expression can be any valid javascript expression. If the expression is Truthy, html content will be shown, otherwise it will be hidden. ngShow simply uses css property display:hide/show
The situation is I have an HTML structure somewhat similar to this:
<div class="dynamicDirectiveGoesHere">
<p>{{SomeExpressionThatDiffers}}</p>
</div>
I need to display a bootstrap http://angular-ui.github.io/bootstrap/ popover when the text within p has an ellipsis. That's why I'm adding the popover attribute dynamically. I can get the popover to display using $compile, but the problem is the text within {{ }} goes away. I can't use the template trick since I don't really know what the template will be since the popover will happen on several different child tags that have different templates. So that's why there is the need to only $compile what's in div, and not in the child element (p tag). Is this possible with angular?
You can add the property terminal to your directive and adjust the priority to fit your needs.
terminal: true prevents other directives from getting instantiated and is used by for example the ng-repeat and ng-if directive.
You can read more here https://docs.angularjs.org/api/ng/service/$compile (scroll down to terminal).
Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?
If you are making the table cells directly editable using the HTML contenteditable attribute, ng-model won't work automatically as by default it's only for form elements.
It is possible to make it work with contenteditable though. There is an working example of how to do it on the angular website at http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
ng-model is allowed wherever typical form elements exist that can use the directive (input, select and textarea)
One thing I will say about ng-model that can make it a bit tricky is that you will want to bind ng-model to a property of an object rather than just a simple scope variable. I have run into several instances where I bind $scope.foo to ng-model and use it in an input control. Then, if you clear the input field, the binding is lost and it stops updating the variable. Use something like $scope.fooObj.modelProp where fooObj is an object and it will work fine.
I'm running into an issue with two way binding in angular on a custom directive. I have a directive that will have a editor mode (and have different types of inputs) and display mode.
unfortunately, it seems that if there is a ng-switch the two-way binding breaks from the control. But the variables remain linked if I access it from an external component. Here is a very cutdown example plunker to show the problem.
http://plnkr.co/edit/M8gPfRlrVIXHdXREN1ai
If you modify the top input the changes propogate to the bottom input. But if you modify the bottom input the binding breaks.
How can I resolve this issue so that the changes to ng-model in the directive propagate to the controllers scope?
You are facing this problem because Ng-Switch creates its own scope
So there are two solutions to this problem
1) Use two dots in model
http://plnkr.co/edit/E7cE37VfrqatiMX885ZZ?p=preview
2) Use $parent in the model
http://plnkr.co/edit/eaFYF5kgOnkhsGpdgzFA?p=preview