控制器内部无法访问 Angular js 输入模型答案

【问题标题】：Angular js input models not accessible inside controller控制器内部无法访问 Angular js 输入模型
【发布时间】：2016-04-18 10:57:12
【问题描述】：

我正在使用此代码在数组中查看和添加人员。

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<body>

<h1>People</h1>

<div ng-controller="Ctrl">
    <div ng-view></div>
</div>

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>

</body>
</html>

add.html

<h1>Add</h1>

<input type="text" ng-model="new_name" placeholder="Name">
<br />
<input type="text" ng-model="new_age" placeholder="Age">

<br />
<button ng-click="add()">Add</button>

<hr />
<a href="#/">Back</a>

controller.js

var app = angular.module('myApp', ['ngRoute']);

app.config(function ($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: 'list.html'
        })
        .when('/add',{
            templateUrl: 'add.html',

        });
});

app.controller('Ctrl', function($scope) {
    $scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
    $scope.add = function(){
        $scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
        $location.path("/");
    };
});

问题是，我没有从ng-model="new_name" 获取数据到控制器方法$scope.add = function()。按下添加按钮后，只有空白字符串被推入数组。但是，模型和控制器可以在没有路由和 ng-view 指令的情况下完美运行。我认为它的范围相关问题。任何机构都可以帮助我。谢谢。

【问题讨论】：

标签： javascript angularjs angularjs-scope

【解决方案1】：

因为您应该为每个视图指定控制器。所以尝试这样做：

app.config(function ($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: 'list.html',
            controller: 'Ctrl'
        })
        .when('/add',{
            templateUrl: 'add.html',
            controller: 'Ctrl'
        });
});

更好的解决方案是为每个视图设置一个单独的控制器。另外，请查看$routeProvider documentation。

【讨论】：

【解决方案2】：

只需从 index.html 中删除 <div ng-controller="Ctrl"> 并为您的路由添加一个控制器属性。

controller.js

var app = angular.module('myApp', ['ngRoute']);

app.config(function ($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl: 'list.html'
        })
        .when('/add',{
            templateUrl: 'add.html',
            controller: 'Ctrl'
        });
});

app.controller('Ctrl', function($location,$scope) {
    $scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
    $scope.add = function(){
        $scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
        $location.path("/");
    };
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<body>

<h1>People</h1>

<div ng-view></div>

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>

</body>
</html>

【讨论】：

【解决方案3】：

首先你必须用<form> 标签和name='' 属性包装你的输入。下一步是为每个<input> 标签赋予name='' 属性。看：

<form name='myLoginForm'>
    <input name='nick' ng-model='loginFormModel.nick'>
    <input name='password' ng-model='loginFormModel.password'>
</form>

在控制器中：

app.controller('Ctrl', function($location,$scope) {
    $scope.loginFormModel = {}; //now you have whole values from view in this variable, for example nick is available in $scope.loginFormModel.nick
});

【讨论】：