[英]$scope var not propagating in child
In a list of items, clicking an item opens up an input field using ng-show="showInput=true"
. 在项目列表中,单击项目将使用ng-show="showInput=true"
打开输入字段。
<div ng-app="myApp" ng-controller="Ctrl">
<li ng-click="showInput=true" ng-repeat="label in labels">{{label}} - ---> show input = {{showInput}}
<form ng-show="showInput" >
<input type=text value={{label}}><button ng-click="saveDate()">save</button>
</form>
</li>
</div>
However, when clicking on save
, setting showInput=false
the form is not hiding: 但是,单击“ save
,设置showInput=false
表单未隐藏:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.labels=["click a", "click b", "click c", "click d", "click e"];
$scope.showInput = false;
$scope.saveData = function(){
$scope.showInput = false;
}
}]);
I suspect this is a parent / child scope issue. 我怀疑这是父/子范围问题。 Can anyone point out how to make this work? 任何人都可以指出如何使这项工作?
Fiddle: http://jsfiddle.net/supercobra/PUZzZ/ 小提琴: http : //jsfiddle.net/supercobra/PUZzZ/
You have a few bugs here. 你有一些错误。
In your HTML you should write saveData() (not saveDate()). 在你的HTML中你应该写saveData()(而不是saveDate())。
When you click any element inside your li (including your button) , it will set your showInput at true. 单击li中的任何元素(包括按钮)时 ,它会将showInput设置为true。
You are dealing with a pure JavaScript object within the scope. 您正在处理范围内的纯JavaScript对象。 There is a question specificlly asking what to do with this at an AngularJS Meetup you can see here . 在AngularJS Meetup中有一个问题,具体问一下如何处理这个问题, 你可以在这里看到 。 The best solution seems to use an object so the child and the parent use the same referenced object. 最好的解决方案似乎使用一个对象,因此子和父对象使用相同的引用对象。 Here is how I've done it (using a key system instead of the label would be safer tho) 这就是我如何做到的(使用关键系统代替标签会比较安全)
Look at this fiddle for my solution. 看看这个小提琴我的解决方案。
<div ng-app="myApp" ng-controller="Ctrl">
<li ng-repeat="label in labels">
<span ng-click="showInput[label] = true">{{label}}</span> - ---> show input = {{showInput}}
<form ng-show="showInput[label]" >
<input type=text value={{label}}><button ng-click="saveData(label)">save</button>
</form>
</li>
</div>
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.labels=["click a", "click b", "click c", "click d", "click e"];
$scope.showInput = {};
$scope.saveData = function(label){
$scope.showInput[label] = false;
}
}]);
This work perfectly. 这工作完美。 The problem is if you use a $scope variable inside a child, the parent will not be able to access it when you save. 问题是如果在子项中使用$ scope变量,则父项在保存时将无法访问它。
The problem is indeed that ng-repeat
creates its own scope and that you override your showInput
. 问题确实是ng-repeat
创建了自己的范围,并且您覆盖了showInput
。
What I usually do in this situation is to keep track of those forms which are currently shown and implement a toggle like method, like shown in this fiddle . 在这种情况下我通常做的是跟踪当前显示的那些形式并实现类似toggle的方法, 如此小提琴中所示。 This keeps track of the opened form within the controller and not the $scope
object, which only provides methods (to all child scopes, such as that of ng-repeat) to access the private information. 这将跟踪控制器中打开的表单,而不是$scope
对象,后者仅提供访问私有信息的方法(对所有子范围,例如ng-repeat的范围)。
You also have a typo in the call to saveData
, but that is not the problem. 你在saveData
的调用中也有一个拼写错误,但这不是问题。
Yo have given <button ng-click="saveDate()">
in your view and in your controller you call the function as $scope.saveData
. 你已经在你的视图中给出了<button ng-click="saveDate()">
,你在控制器中将这个函数称为$scope.saveData
。 Typo error. 错字错误。 change $scope.saveData
to $scope.saveDate
将$scope.saveData
更改$scope.saveData
$scope.saveDate
why dont you try something like: 为什么你不尝试这样的事情:
ng-click="showInput = false"> ng-click =“showInput = false”>
sometime using ng-click inside form doesnot work the way you want. 有时在表单内使用ng-click并不能按照你想要的方式工作。 u can try with input type='submit' also that makes your work much easier. 你可以尝试输入type ='submit'也可以让你的工作更容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.