I am using the tabs directive from the UI Bootstrap Library (0.11) together with Angular (v1.3.0-beta.10).
In my Tab I use a select Element and bind with a variable in my scope. If I change the value of the select element the model in the controller does not change. After a while I have tried to use the $parent scope in my select element.
<select ng-hide="$parent.hideDimensionPartBenchmark"
id="dimension-part-benchmark"
class="form-control"
ng-model="$parent.dimensionPartBenchmark"
ng-options="dpb.name for dpb in $parent.dimensionPartsBenchmark"></select>
With this attempt the model changes.
Is this the right way for model-view binding?
regards,
Marko
Update
I have created a plunker, but there I can not reproduce the problem: http://plnkr.co/edit/B5RC2Iivqkv2zzkKNFFV?p=preview
The only difference between this example an my project is, that I load a part of the site with the tabs.
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/
I'm using AngularJS and Bootstrap. I have the following problem:
I want to display an error on top of the tabs but for some reason it doesn't seem to be working. So the following never gets displayed:
<p ng-show="forma.isTabSelected.$error.required">Please select Tab.</p>
The only way for that to be displayed is by taking the checkbox outside the tab-heading tag (I don't want to do that).
Here's the plunker
Any help will be appreciated.
In order to get access to the scope in the Tabset, you should prefix your variable with the model name:
ng-model="forma.isTabSelected"
The tab creates a child scope. You need to bind your input to a model in the parent scope.
I have created a dynamic custom directive which has a bidirectional ng-model, But for some reason controller cannot access the ng-model $scope binding and I tried without dynamic custom directive by hardcoding view (skipping step 1) which binds to $scope without any issue, I am not sure if i need to recompile or it is a scope issue
Step 1: Creates <inputbox> custom directive using json retrieved from the database dynamically and compiles DOM
Step 2: Replaces <inputbox> with <input
ng-Model="ngModel"> (ngModel not binding to $scope)
Plunker link
Hours of troubleshooting no idea why its not binding, Any help is really appreciated!
Thanks
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