Почему мой $ scope не работает?

Question

Я новичок в angularJS. Я закончил phone-cat tutorial на официальном угловом документе. Я пытаюсь создать для него какую-то новую функцию, например (создать новый элемент, отредактировать ...) Предположим, что я создал api для этого.

приложение/телефон создать/телефон-create.module.js

angular.module('phoneCreate', ['core.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} 
       } 
      } 

     ] 
    }); 

приложение/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> 

Когда я нажимаю Create, я хочу, чтобы поля ввода вводились в область видимости в контроллере, но были недофинансированы. Я не знаю, почему и как исправить. Пожалуйста, помогите мне!.

Answer 1

Давайте посмотрим на эти три линии:

<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"> 

У них есть ng-модели: $ctrl.name, $ctrl.description, $ctrl.kind. Ваш компонент не объявляет эти переменные.

Измените их $ctrl.data.name, $ctrl.data.description, $ctrl.data.kind и изменить компонент:

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); 
      }; 
     } 

    ] 
}); 

Answer 2

ВАРИАНТ 1:

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

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

     ] 
    }); 

ВАРИАНТ 2:

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

       // No need to initialise self.data 
       self.data = { 
        name: '', 
        description: '', 
        kind: '' 
       } 

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

     ] 
    }); 

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.data.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.data.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.data.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>