Develop Reference

"ng-click" not working out of "ion-content" in Ionic framework

I have an input box with the ng-model attribute in my ionic based application. The code inside the ion-content tag:
<ion-content class="padding">
<input ng-model="myNumber" type="number" placeholder="Enter number">
</ion-content>
And in the footer-bar I have this:
<div class="bar bar-footer bar-balanced" style="background-color: #00368C !important; color: #fff;">
<div class="title">
<button ng-click="submit(myNumber)" class="button button-clear">Submit</button>
</div>
</div>
The alert result is undefined.
NOTE: when I put the button inside the ion-content it works fine. (It means js codes works fine)
Any idea?

The reason behind your problem is, ion-content directive does create a child scope which is prototypically inherited from the parent scope. So by placing myNumber in input ng-model does get added inside the scope of ion-content, which is different that the controller myNumber number scope variable.
To make it working you need to follow dot rule while defining ng-model, so that prototypal inheritance rule will get follow(it works on reference type variable).
So create an new object inside a controller and do assign all ng-model variable into it. like below
$scope.model = {};
And then put all the properties you wanted to use on view like $scope.model.myNumber & while using it on view use it like model.myNumber
Markup
<ion-content class="padding">
<input ng-model="model.myNumber" type="number" placeholder="Enter number">
</ion-content>
<div class="bar bar-footer bar-balanced" style="background-color: #00368C !important; color: #fff;">
<div class="title">
<button ng-click="submit(model.myNumber)" class="button button-clear">Submit</button>
</div>
</div>
Detailed explanation can be found in this answer
More elegant way of doing it would be using controllerAs approach.

A better and simpler solution, use <ion-header-bar> or <ion-footer> and place all your pinned content in there - and then keep all your code in the same controller.
Referenced from: https://stackoverflow.com/a/51785866/2036221

Knockout nested components

I am trying build components with help of KO component binding, but i have a small problem with nested components.
The scenario is I have text-input component which has a label which also is a component.
<div data-bind="component:{name:'text-input', params:{data:$data, parent:$parent}}," class="form-horizontal">
<div class="form-group row">
<div class="col-sm-1">
<div data-bind="component:{name:'label', params:{}}"></div>
</div>
<div class="col-sm-11">
<input type="text" data-bind="value:value" class="form-control" />
</div>
</div>
</div>
Label component has a JS and a template, template looks like below
<label data-bind="text:labelText"></label>
But I am getting an error Multiple bindings (text and component) are trying to control descendant bindings of the same element
I understand <div class="col-sm-1">element is already bound to text-input context. Now the question is how to achieve this scenario.

The component binding fills the content of the <div> with the component's template, wiping out whatever else might be inside (hence the error). One option would be to add another component binding inside the text-input component's template which would allow a componentName/componentParams to be passed in {componentName: label, componentParams: labelParams}. You could also look at working with component child nodes added in Knockout 3.3.

Actually found the issue. It's kind of silly mistake.
My registered component is label and in my label's template I have <label> HTML tag, but since label is also a component, KO was trying to bind label's template to label tag which resulted in error and recursive loop.

AngularJS controller executes twice (not because of router)

From what I read, the most common cause of this problem is when the controller is included in the template and in the route provider. In my case, only the parent template containing this html is being included in the router, and has its own controller. The sub-templates are being included as a result of a menu selection
So, whenever the menu item is selected, the template gets loaded in, and everything in the controller executes twice. Can it be a product of the the ng-switch or ng-include?
<span ng-switch on="selection">
<div ng-switch-when="0">
<div ng-include="'partials/one.html'" ng-controller="oneController"></div>
</div>
<div ng-switch-when="1">
<div ng-include="'partials/two.html'" ng-controller="twoController"></div>
</div>
<div ng-switch-when="2">
<div ng-include="'partials/three.html'" ng-controller="threeController"></div>
</div>
</span>
Edit:
The included partials do not include the controller again. I've triple checked that these controllers are not mentioned anywhere other than this piece of code. The contents of the one/two/three partials look like this, and the controller still runs twice.
<div>Nothing to see here.</div>

I am making an educated guess here... but does your "'partials/one.html'" also have a ng-controller="oneController" in it? If so, you either need to remove the ng-controller declaration from your include div or from your partial.

AngularJS - ng-include ng-controller and scope not binding

I have the following main view
<div ng-include="'otions.html'"></div>
and options.html has the following
<div ng-controller="OptionsController">Options</div>
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>
But "keyword" is not binding to the scope in OptionsController.
app.controller('OptionsController',
['$scope', function($scope) {
$scope.keyword = "all";
$scope.search = function() {
console.log("hello")
};
}]);
when I click on the button, I don't see hello and the keyword all doesn't appear in the input text.
I tried moving the ng-controller part as follows
<div ng-controller="OptionsController" ng-include="'otions.html'"></div>
And things work as expected.
I read through the answers in AngularJS - losing scope when using ng-include - and I think my problem is related, but just need some more explanation to undertstand what's going on.

You should write options.html like this:
<div ng-controller="OptionsController">Options
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>
</div>
OptionsController should be put in the outer html element.

i have face same problem,
Under main tag it will be work fine but, When bind some data to nav.html it not work.
find this link
AngularJS - losing scope when using ng-include
inside include its work child scope.
better option to create custom directive its easy solution

AngularJS 1.2 ngInclude inside ngIf

I'm running into some odd behavior when putting an ngInclude inside an ngIf or ngSwitch.
For example, take the following:
<button ng-click="showIncTemplate = !showIncTemplate">Toggle Included Template</button>
<button ng-click="showInlineTemplate = !showInlineTemplate">Toggle Inline Template</button>
<div ng-if="showIncTemplate">
<p>Included template:</p>
<div ng-include="'template.html'"></div>
</div>
<div ng-if="showInlineTemplate">
<h1>Inline Template</h1>
</div>
(http://plnkr.co/edit/gULbwnKb0gQS8DWz0V6U)
The buttons toggle an options to render the divs that follow. The inline example behaves as expected, with the content appearing or disappearing on click.
The div with the child include seems not to include the template when first drawn, but then includes it repeatedly on every subsequent redraw.
What's going on here? I do see some breaking changes around ngInclude, is there some other way I should be doing this? Or is this a bug in Angular?
Edit:
It looks like this is already in the angularjs github issue tracker:
https://github.com/angular/angular.js/issues/3627

They've fixed it in this snapshot:
http://code.angularjs.org/snapshot/