故障基本待办事项应用角度JS [英] Trouble with basic todo app angular js
问题描述
我是一个新手，这个框架努力理解范围。
I am a newbie to this framework struggling to understand scope .
我遵循的基本步骤创造自耕农网站给予待办事项应用程序。
I followed the basic steps for creating a todo app given in the yeoman website.
这是我的code：
的index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="mytodoApp">
<div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
main.html中
<div class="container">
<h2>My todos</h2>
<!-- Todos input -->
<form role="form" ng-submit="addTodo()">
<div class="row">
<div class="input-group">
<input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" value="Add">
</span>
</div>
</div>
</form>
<p></p>
<!-- Todos list -->
<div ui-sortable ng-model="todos">
<p class="input-group" ng-repeat="todo in todos" style="padding: 5px 10px; cursor: move;">
<input type="text" ng-model="todo" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
</span>
</p>
</div>
</div>
Main.js
'use strict';
angular.module('mytodoApp')
.controller('MainCtrl', function ($scope) {
$scope.todos = ['Item 1', 'Item 2', 'Item 3'];
$scope.addTodo = function () {
$scope.todos.push($scope.todo);
$scope.todo = '';
};
$scope.removeTodo = function (index) {
$scope.todos.splice(index, 1);
};
});
App.JS
'use strict';
angular
.module('mytodoApp', []);
当我点击添加按钮，在$ scope.todo是不确定的和它添加一个项目显示空文本框。
删除功能是工作绝对没问题。
The delete functionality is working absolutely fine.
我想这个问题是范围界定。任何一个护理可以指导我的问候呢？
I guess the problem is with the scoping . Can any one care to guide me with regards to this ?
更新：
请在下面找到屏幕
我没有得到任何错误，而输出是错误的。
这是什么heppening尝试添加一个新的项目时。
This is what heppening when trying to add a new item.
推荐答案
ngController 在执行优先级500，而 ngInclude 在执行优先级400。
ngController executes at priority level 500, while ngInclude executes at priority level 400.
因此，首先ngController将创建一个范围，然后ngInclude。这就是说，在你的包括HTML文件，你要访问控制器作用域的变量每一次，你需要preFIX与 $父，例如 NG-提交=$ parent.addTodo（）。
So first, ngController will create a scope, then ngInclude. That is to say, in your included HTML file, every time you want to access a variable scoped in your controller, you'll need to prefix with $parent, e.g. ng-submit="$parent.addTodo()".
另一种解决方案（恕我直言好）是清除从具有ngInclude div中ngController属性，并把它放在对周围DIV的HTML文件中：
The other solution (better IMHO) is to remove the ngController attribute from the div which has the ngInclude, and to put it in on the surrounding div within your HTML file:
的index.html：
<div class="container" ng-include="'views/main.html'"></div>
main.html中：
<div class="container" ng-controller="MainCtrl">
...
</div>
这篇关于故障基本待办事项应用角度JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
