Ntlzz93 Ntlzz93 - 3 months ago 12
AngularJS Question

Why is my $scope not working?

I'm newbie in angularJS. I have finished phone-cat tutorial on the official angular document. I am trying to create some new feature for it such as ( create a new item , edit ... ) Assume that I created api for this.

app/phone-create/phone-create.module.js

angular.module('phoneCreate', ['core.phone'])


app/phone-create/phone-create.component.js

angular.module('phoneCreate')
.component('phoneCreate', {
templateUrl: 'phone-create/phone-create.template.html',
controller: ['Phone', '$scope',
function PhoneCreateController(Phone, $scope) {
var self = this;

var data = {
name: $scope.name,
description: $scope.description,
kind: $scope.kind
}

self.create = function () {
console.log(data); // {name : underfined , desciprion : underfined , kind : underfined}
}
}

]
});


app/phone-create/phone-create.template.html

<div class="row">
<div class="form-horizontal col-md-8">
<div class="form-group">
<label class="control-label col-sm-4" for="name">Name</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="description">Description</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="kind">Kind</label>
<div class="col-sm-8">
<input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" ng-click="$ctrl.create()" class="btn btn-default">Create</button>
</div>
</div>
</div>
</div>


When I click
Create
, I want to fields in input will be accessed by scope in controller but it is underfined. I don't know why and how to fix. Please help me!.

Answer

Let's take a look at these three lines:

<input type="text" ng-model="$ctrl.name" class="form-control" id="name" placeholder="Name">

<input type="text" ng-model="$ctrl.description" class="form-control" id="description" placeholder="description">

<input type="text" ng-model="$ctrl.kind" class="form-control" id="kind" placeholder="Kind">

They have ng-models: $ctrl.name, $ctrl.description, $ctrl.kind. Your component doesn't declare those variables.

Change them to $ctrl.data.name, $ctrl.data.description, $ctrl.data.kind and modify your component:

angular.module('phoneCreate')
.component('phoneCreate', {
    templateUrl: 'phone-create/phone-create.template.html',
    controller: ['Phone', '$scope',
        function PhoneCreateController(Phone, $scope) {
            var self = this;

            self.data = {
                name: "",
                description: "",
                kind: ""
            };

            self.create = function () {
                console.log(self.data);
            };
        }

    ]
});
Comments