Javascript 控制器内部无法访问角度js输入模型
我使用这段代码来查看和添加数组中的人员 index.htmlJavascript 控制器内部无法访问角度js输入模型,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我使用这段代码来查看和添加数组中的人员 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"></scr
<!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>
<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>
<!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>
问题是,我没有将数据从ng model=“new_name”
获取到控制器方法$scope.add=function()
。按add按钮后,只有空白字符串被推入数组。但是,在没有路由和ng view指令的情况下,模型和控制器工作正常。我认为它的范围与问题有关。有人能帮我吗。
谢谢。因为您应该为每个视图指定控制器。所以试着这样做:
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'Ctrl'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
更好的解决方案是为每个视图使用单独的控制器。另外,请查看。只需从index.html中删除
,并为您的路线添加控制器属性
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-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>
<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>
<!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>
人
首先,您必须使用
标记和名称=''
属性来包装输入。
下一步是为每个
标记提供name='
属性。看:
<form name='myLoginForm'>
<input name='nick' ng-model='loginFormModel.nick'>
<input name='password' ng-model='loginFormModel.password'>
</form>
什么是应用程序目录结构?所有文件都在同一目录中。