ng-click outside form dosen't get data

Question

click i dosen't get the form data when button is outside form

code

<ion-view title="Indstillinger">

<ion-nav-buttons side="right">
    <button class="button" form="userForm" ng-click="update()">
        Gem
    </button>
</ion-nav-buttons>


<ion-content padding="true" class="has-header">
    <form id="userForm">

        <ion-list>


            <label class="item item-input" name="navn">
                <span class="input-label">Navn</span>
                <input type="text"  placeholder={{user.name}}  ng-model="name">
            </label>


        </ion-list>
    </form>
</ion-content>

i tried add form id to form and button, but i still dosen't get the form data on ngclick :/

update:

 $scope.update = function() {
        console.log(this.name);
    })

show your javascript , and show enough of your HTML to include ng-app and ng-controller or whatever related ng attributes — Scott Selby, May 24 '15 at 17:49

score 2 · Accepted Answer · answered May 24 '15 at 18:08

ion-content creates a child scope. The input element is setting the "name" property on this scope, not the scope being used in the ion-nav-buttons section.

This is the classic "dot notation" issue in Angular.

If you are using an "outer" controller:

<div ng-controller="outer as vm">
    <ion-view title="Indstillinger">

    <ion-nav-buttons side="right">
        <button class="button" form="userForm" ng-click="update()">
            Gem
        </button>
    </ion-nav-buttons>


    <ion-content padding="true" class="has-header">
        <form id="userForm">

            <ion-list>


                <label class="item item-input" name="navn">
                    <span class="input-label">Navn</span>
                    <input type="text"  placeholder={{user.name}}  ng-model="vm.name">
                </label>


            </ion-list>
        </form>
    </ion-content>
</div>

.controller('outer', function($scope) {
    $scope.user = {
        name: "Joe"
    }
    $scope.update = function()
    {
        console.log($scope.vm.name);
    }
})

that and the fact that he didn't even reference a controller in his HTML , which will also make code not function — Scott Selby, May 24 '15 at 18:13
ohhhh , I have no clue what ion is , I could be worng there , you'd know better — Scott Selby, May 24 '15 at 18:14
I suspect the OP is just leaving the outer controller out for his own reasons. — Joe Enzminger, May 24 '15 at 18:14

score 1 · Answer 2 · answered May 24 '15 at 17:58

1

You will want to use:

console.log($scope.name);

instead of:

console.log(this.name);

answered May 24 '15 at 17:58

PhuLuong

527
4
11

still dosen't get the form value – Stweet May 24 '15 at 18:01
1

I already asked OP to show code , as far as I can tell this answer is correct, unless OP would like to create a fiddle example or elaborate more with the actual code that is breaking this – Scott Selby May 24 '15 at 18:06
$scope.update is the only thing in controller besides scope user – Stweet May 24 '15 at 18:11

score 0 · Answer 3 · answered May 24 '15 at 18:05

since you didn't post the rest of HTML or the rest of controller code , this is the only answer I can possibly provide

 $scope.update = function() {
        console.log($scope.name);
    })

I know you said that it doesn't work , but that code is in fact valid and does work. Something else that you refused to post is breaking

Did you check console for errors? I'm sure there are some, did you confirm that angular is properly loaded, did you properly set add ng-app and ng-controller ?

$scope.update is the only thing in controller besides scope.user... and this is all html for this form.. so all code need'ed is here — Stweet, May 24 '15 at 18:10

score 0 · Answer 4 · edited May 23 '17 at 12:23

0

1) Try moving your <button ng-click="update"> outside of your <ion-nav-buttons> container and see if it works.

2) If it works, read this: Transcluding ng-click in a directive

edited May 23 '17 at 12:23

Community

1
1

answered May 24 '15 at 18:12

Alextoul

839
3
9
19

ng-click outside form dosen't get data

4 Answers4