AngularJS：如何从视图数据传递到控制器angularjs [英] AngularJS: How to pass data from view to controller in angularjs
问题描述
我开发一个应用程序，它增加/修改/删除联系人。
这是我加入联系人视图模板的样子：
＆LT;输入占位符=名NG-模式=contact.name类型=文本＆GT;
＆LT;输入占位符=数字NG-模式=contact.number类型=文本＆GT;
＆LT; A HREF =＃/＆GT;＆LT;按钮＆gt;添加＆LT; /按钮＆GT;＆LT; / A＆GT;
这是我的控制器文件，用于添加的最后一个控制器：
VAR对myApp = angular.module（'对myApp'，['ngRoute']）。配置（函数（$ routeProvider） {
$ routeProvider.when（'/联系人/：指数'，{
templateUrl：'谐音/ edit.html'，
控制器：'编辑'
}）。什么时候（'/'， {
templateUrl：'谐音/ contacts.html
}）时，（'/加'，{
templateUrl：'谐音/ add.html'，
控制器：'添加'
}）
不然的话（{redirectTo：'/'}）;
}）。控制器（'联系人'，['$范围'，函数（$范围）{
$ scope.contacts = [
{名称：'哈齐姆'，号码：01091703638}，
{名：塔哈，号码：01095036355}，
{名称：'阿多拉'，号码：01009852281}，
{名称：'Esmail，编号：'0109846328'}
];
}]）。控制器（'编辑'，['$范围，$ routeParams'，函数（$范围，$ routeParams）{
$ scope.contact = $ scope.contacts [$ routeParams.index];
$ scope.index = $ routeParams.index;
}]）。控制器（'添加'，['$范围'，函数（$范围）{
$ scope.contacts.push（{名称：contact.name，编号：contact.number}）;
}]）;
在Chrome检查说我有一个错误：
的ReferenceError：CONTACTNAME没有定义
控制器（'添加'，['$范围'，函数（$范围）{
$ scope.contacts.push（{名称：联系人姓名，编号：contactnumber}）;
}]）;
每个控制器都有自己的适用范围，在你添加控制器，你只是想推未进定义这也是不确定的 $ scope.contacts 变量的东西。
也在你的观点，当你传递的东西到NG-模型，这基本上是建立一个双向的数据与您的控制器名称的变量之间的绑定。因此，在这种情况下，你的HTML将创建两个变量： $ scope.contactname 和 $ scope.contactnumber
在你看来，你还呼吁还没有被你的控制器上定义了一个函数Add（）。
下面是你的控制器看起来应该像什么：
控制器（'添加'，['$范围'，函数（$范围）{
$ scope.contacts = []; //你宣布你的控制器范围触点阵列
//$scope.contacts = getContactsFromDB（）; //通常你会从一个数据库来得到你的初步名单 //作为好习惯，你应该初始化您的范围对象：
$ scope.contactname ='';
$ scope.contactnumber =''; $ scope.Add =功能（）{
$ scope.contacts.push（{名：$ scope.contactname，编号：$ scope.contactnumber}）;
//你也可以将数据添加到数据库
/ *
的ContactService
.AddNewContact（$ scope.contactname，$ scope.contactnumber）
。然后（函数（）{
$ scope.contacts.push（
{名：$ scope.contactname，编号：$ scope.contactnumber}）;
}）;
* / //最后，你应该重新设置表单变量
$ scope.contactname ='';
$ scope.contactnumber ='';
}
}]）;
I'm developing an application which adds/edits/removes contacts. Here is how my adding contact view template looks like:
<input placeholder="name" ng-model="contact.name" type="text">
<input placeholder="number" ng-model="contact.number" type="text">
<a href="#/"><button>Add</button></a>
And here is my controllers file, the controller used for adding is the last one:
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});
}]);
I've got an error in the chrome inspector says: ReferenceError: contactname is not defined
controller('Add', ['$scope', function($scope){
$scope.contacts.push({name: contactname, number: contactnumber});
}]);
Each controller has its own scope, in your Add controller you are simply trying to push something that isn't defined into a variable that's also undefined $scope.contacts.
Also on your view, when you pass something into ng-model, this is basically creating a two-way data binding between a variable with that name in your controller. So in this case, your html will create two variables: $scope.contactname and $scope.contactnumber.
On your view you are also calling a function Add() which hasn't been defined on your controller.
Below is what your controller should look like:
controller('Add', ['$scope', function($scope){
$scope.contacts = []; //you declare your array of contacts in the controllers scope
//$scope.contacts = getContactsFromDB(); //typically you'd be getting your initial list from a DB
//As good practice, you should initialize the objects in your scope:
$scope.contactname = '';
$scope.contactnumber = '';
$scope.Add = function() {
$scope.contacts.push({name: $scope.contactname, number: $scope.contactnumber});
//Also you could add the data to a database
/*
ContactService
.AddNewContact($scope.contactname, $scope.contactnumber)
.then(function(){
$scope.contacts.push(
{name: $scope.contactname, number: $scope.contactnumber});
});
*/
//Finally you should reset the form variables
$scope.contactname = '';
$scope.contactnumber = '';
}
}]);
这篇关于AngularJS：如何从视图数据传递到控制器angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
