コントローラ内で角型js入力モデルにアクセスできない

このコードを使用して、配列内の人々を表示および追加します。コントローラ内で角型js入力モデルにアクセスできない

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ディレクティブなしで完璧に動作します。スコープに関連した問題だと思います。私の体はこれで助けてくれますか？おかげさまで

出典

2016-04-18 h_a86

アプリのディレクトリ構造とは何ですか？ –

すべてのファイルが同じディレクトリにあります。 –

各ビューにコントローラを指定する必要があるためです。だから、これをやってみてください：

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

より良い解決策は、各ビューの別のコントローラを持っているだろう。また、$routeProvider documentationをご覧ください。

出典

2016-04-18 12:38:13

うまくいかなかった... –

index.htmlから<div ng-controller="Ctrl">を削除し、ルートのコントローラ属性を追加するだけです。

controller.jsあなたはname=''属性で<form>タグを使用して入力をラップする必要が最初

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>

出典

2016-04-18 12:49:53 huseyinozcan

うまくいかなかった... –

。次のステップは、<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 
});

出典

2016-04-18 13:10:59

コントローラ内で角型js入力モデルにアクセスできない

答えて

関連する問題