CODEWITHSUNDEEP
javascriptangularjs
Evangelos Aktoudianakis
Evangelos Aktoudianakis

Reputation: 755

When is a scope variable created in AngularJS?

I am new to Angular. Please, consider the following piece of code.

        <form name="newEventForm">
            <fieldset>
                <label for="eventName">Event Name:</label>
                <input id="eventName" required ng-model="event.name" type="text" placeholder="Name of your event...">


            <button ng-click="saveEvent(event, newEventForm)" type="submit" class="btn btn-primary">Save</button>
            <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button>
        </form>

My question is - why do we need to pass the event argument to the saveEvent function? Doesn't using ng-model auto generate an event.name variable through two-way binding on the Angular side? e.g.

<form name="newEventForm">
                <fieldset>
                    <label for="eventName">Event Name:</label>
                    <input id="eventName" required ng-model="event.name" type="text" placeholder="Name of your event...">


                <button ng-click="saveEvent( newEventForm)" type="submit" class="btn btn-primary">Save</button>
                <button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button>
            </form>

In this second version of the code, I am not explicitly injecting event as a function parameter. However, when pressing submit, this is the code for saveEvent

$scope.saveEvent = function(newEventForm)
    {
        alert(1);
        alert(newEventForm.$valid);
        if(newEventForm.$valid)
        {
            window.alert('event ' + event.name + ' saved!');
        }
    }

and event is undefined. Shouldn't it be defined? Apologies if the question is a newbie's question. Just trying to get my head around how scope items are created through ng-model, and how does two-way binding work. Thanks !

UPDATE

Doh, I should've used $scope.event. Then it works. Thanks, like I said - new to this and it only dawned to me after I asked the question :)

Upvotes: 0

Views: 54

Answers (2)

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

Actually all variable or model which are specified in the html are scope variable.

Example

<div ng-controller="myController" ng-init="name='Hello World'">
    {{name}}
    <button ng-click="myFn(name)"> Click Me </button>
</div>

In this example, I have initiated a variable called name. It is actually a scope variable. This code will actually like 

myApp.controller("myController", function($scope){
    $scope.name = "Hello World";

    $scope.myFn = function(param){
        // here you can see that your variable name passed from html is same as your scope variable
        if(param == $scope.name){
            alert("Yes, two are equal !!!");
        }
    }
});

This two are same. You can either use html or js.

Upvotes: 0

Ran Sasportas
Ran Sasportas

Reputation: 2266

The view is creating the event variable under the associated scope, use $scope.event.name. Good luck

Upvotes: 1

Related Questions