AngularJS：如何在 angularjs 中将数据从视图传递到控制器

Question

我正在开发一个添加/编辑/删除联系人的应用程序。 这是我添加联系人视图模板的样子：

<input placeholder="name" ng-model="contact.name" type="text">
<input placeholder="number" ng-model="contact.number" type="text">
<a href="#/"><button>Add</button></a>

这是我的控制器文件，用于添加的控制器是最后一个：

var myApp = angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when('/contact/:index', {
        templateUrl: 'partials/edit.html',
        controller: 'Edit'
    }).when('/', {
        templateUrl: 'partials/contacts.html'
    }).when('/add', {
        templateUrl: 'partials/add.html',
        controller: 'Add'
    })
    .otherwise({ redirectTo: '/' });
}).controller('Contacts',  ['$scope',function($scope){
    $scope.contacts = [
    {name:'Hazem', number:'01091703638'},
    {name:'Taha', number:'01095036355'},
    {name:'Adora', number:'01009852281'},
    {name:'Esmail', number:'0109846328'}
    ];
}]).controller('Edit', ['$scope','$routeParams',function($scope,$routeParams){
    $scope.contact = $scope.contacts[$routeParams.index];
    $scope.index = $routeParams.index;
}]).controller('Add', ['$scope', function($scope){
    $scope.contacts.push({name: contact.name, number: contact.number});
}]);

我在 chrome 检查器中有一个错误说： ReferenceError: 未定义联系人姓名

Answer 1

请看下面

使用<button ng-click="Add()">Add</button> 代替<a> 标签

var myApp = angular.module('myApp', [])
.controller('Add', ['$scope', function($scope){
  $scope.contacts = [];
  $scope.Add = function() {
    $scope.contacts.push({name: $scope.contactname, number: $scope.contactnumber});
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Add">
<input placeholder="name" ng-model="contactname" type="text">
<input placeholder="number" ng-model="contactnumber" type="text">
<button ng-click="Add()">Add</button>
 
    <ul>
    <li ng-repeat="con in contacts">{{con.name}} {{con.number}}</li>
    </ul>
    
    </div>
  </div>

在您的添加控制器中 改变

.controller('Add', ['$scope', function($scope){
    $scope.contacts.push({name: contactname, number: contactnumber});
}]);

.controller('Add', ['$scope', function($scope){
    $scope.contacts.push({name: $scope.contactname, number: $scope.contactnumber});
}]);

Answer 2

controller('Add', function(){
    this.contacts.push({name: contactname, number: contactnumber});
}]);

每个控制器都有自己的范围，在您的 Add 控制器中，您只是试图将未定义的内容推送到同样未定义的变量中 $scope.contacts。

在您看来，当您将某些内容传递给 ng-model 时，这基本上是在控制器中具有该名称的变量之间创建双向数据绑定。因此在这种情况下，您的 html 将创建两个变量：$scope.contactname 和 $scope.contactnumber。

在您看来，您还调用了尚未在控制器上定义的函数 Add()。

以下是您的控制器的外观：

controller('Add', function(){
   var vm = this;
   vm.contacts = []; //you declare your array of contacts in the controllers scope
   //vm.contacts = getContactsFromDB(); //typically you'd be getting your initial list from a DB

   //As good practice, you should initialize the objects in your scope:
   vm.contactname = '';
   vm.contactnumber = '';

   vm.Add = function() {
     vm.contacts.push({name: vm.contactname, number: vm.contactnumber});
     //Also you could add the data to a database
     /*
       ContactService
       .AddNewContact(vm.contactname, vm.contactnumber)
       .then(function(){
              vm.contacts.push(
                  {name: vm.contactname, number: vm.contactnumber});
       });
     */

     //Finally you should reset the form variables
     vm.contactname = '';
     vm.contactnumber = '';
   }  


}]);