I am working on angular application. I need to bind two model variable using ng-bind and two variables from two different scope (One from parent and other from child scope). Is that possible?
Here is the code what I tried:
<input tabindex="2" id="{{ClientAC}}" ng-model="a.ClientAC"
ng-blur="clientFocusout()" ng-keydown="clientKeyDown($event)" />
Related
Quick questions. Im generating part of a form dynamically, namely the radio buttons part and I am using an ng-repeat. To do this I have the following code to loop through and list the radio button options:
<div ng-repeat="choice in question.choices">
<input name="{{q.name}}" type="radio" value={{choice.id}} ng-model="choice_[q.answer]" required /> {{choice.choice}}
</div>
I have two issues with this, firstly, im not sure if I am correctly assigning my ng-model dynamically.
Secondly once the model is created it seems to be in its own scope and unusable outside of the repeat due to it being encapsulated within the repeat div.
Is there a way I would be able to access this model? perhaps just passing it through the parent scope using $parent or so?
Any help would be appreciated.
Thanks
I created a plunker to show how to access your model:
Model access demo
<input type="radio" value={{choice.id}} ng-model="$parent.choice" required /> {{choice.choice}}
I used the same model name for every input in the repeat. This way whichever input is selected becomes the active model. That should solve your model naming issue.
Secondly, ng-repeat creates a scope for every template it produces, so you do want to use $parent to access the model on your controllers scope.
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.
I want to have a custom directive that is reusable and creates an isolate scope so it can be used anywhere (as long as the consumer uses the API defined by the directive). Then, I want the consumer to easily be able to mix and match different reusable pieces that fit within the main reusable directive.
The situation I'm working with is a drop down menu. The main directive would isolate the scope and define the API for the dropdown as a whole. The inner directives would allow the consumer to choose whether they want a button that opens the menu, a search box/input field that opens the menu, etc. Then they could also choose what menu style is used:
<dropdown items="..." selected-item="...">
<dropdown-button>(Transcluded button text here)</dropdown-button>
<dropdown-icon-list></dropdown-icon-list>
</dropdown>
The parent directive/controller would handle state/communication for the inner pieces (ie. the button might trigger the "open" state, and the list would respond by opening). In other words, the parent directive would provide a single place for the consumer to define behavior and isolate scope from the rest of the page, while the nested directives would change shared state/respond to changes in shared state based on their role.
I actually had this working by using an isolate scope on the main "dropdown" directive and then inheriting scope with the nested directives (didn't specify "scope: ..." on the nested directives). But, with Angular 1.2, things have changed such that the isolate scope of the parent is truly isolated--the children inherit the scope that exists outside the parent directive, rather than sharing its isolated scope.
What is the Angular way to accomplish such a thing?
I've started retrofitting my existing code to share the controller from the parent directive with the nested children, but I feel that's the wrong way to go once I get into the situation where the children need to listen for changes on the shared scope... The only way I can see to do that would be to pass a callback function from the nested directives into the shared controller which it would bind to a $scope.$on method. Seems like the wrong path to head down.
There’re 3 types of prefixes AngularJS provides.
"#" ( Text binding / one-way binding )
"=" ( Direct model binding / two-way binding )
"&" ( Behaviour binding / Method binding )
All these prefixes receives data from the attributes of the directive element and provide communication between directives. please visit below link for similar question.
Visit https://stackoverflow.com/a/33024209/4348824
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
I am new to Angular and have basic problems, getting Angular-UI-Bootstrap to work in combination with AngularJS. Here a simple example, an usual input field that uses ng-change for event handling, and which has a popover. Without the popover attributes, the codes works fine. When the popover attributes are added, the popover is displayed correctly, and looks fine, but the event handler is not called, and also the password model not updated, when the value of the input field changes.
Same problem holds e.g. if I have a button with event handling code and a popover. Same problem also if I do not use popover, but tooltip.
<input type="password" ng-model="password" placeholder="New Password"
ng-change="onPasswordChanged()" popover="I am a popover!"
popover-trigger="mouseenter" />
I am using ui-bootstrap-tpls-0.3.0.js and AngularJS v1.0.7.
Does someone know what the problem is?
Popover directive creates a child scope, so when you bind your model to a primitive, the binding will stay inside that scope (it will not propagate upwards). See "What are the nuances of scope prototypal / prototypical inheritance in AngularJS?" for more info on inheritance.
Workaround is to use a dot notation when referencing your models:
<input type="password" ng-model="data.password" popover="I am a popover!"
popover-trigger="mouseenter" />
DEMO PLUNKER