I have a page with multiple controllers, one of the controller is being used in 2 different divs within the same page. I am not sure if it is a scope issue or I just miss something in my code.
我有一个带有多个控制器的页面,其中一个控制器正在同一页面中的2个不同的div中使用。我不确定它是否是一个范围问题,或者我只是错过了我的代码中的一些内容。
here is the plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
这里是plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
I want to hide the textbox when the user clicks on 'Savings' link, display the box when clicking on 'Cost' link.
我想在用户点击“优惠”链接时隐藏文本框,在点击“费用”链接时显示该框。
5 个解决方案
#1
10
Every time you use ng-controller, you make a new instance of said controller, with it's own scope. If you set subCCtrl on the body tag (or a new parent), and remove it from the two divs it is currently on, it works for me.
每次使用ng-controller时,都会使用自己的范围创建所述控制器的新实例。如果你在body标签(或一个新的父级)上设置subCCtrl,并从当前打开的两个div中删除它,它对我有用。
Other solutions you might want to look in to are by keeping "hideThisBox" on the root scope, broadcasting an event when clicking on save or by keeping it in a service.
您可能想要查看的其他解决方案是将“hideThisBox”保留在根作用域上,在单击“保存”时保留事件或将其保留在服务中。
#2
16
Same controller, but declared twice. therefor - two scopes.
Normally the solution is to move the ng-controller declaration one dom level higher (in your case, to the body element. once only), and have it only once. Otherwise, look into angular services.
相同的控制器,但声明了两次。因此 - 两个范围。通常,解决方案是将ng-controller声明移动一个dom级别(在您的情况下,移动到body元素。只有一次),并且只有一次。否则,请研究角度服务。
see updated plunkr: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
请参阅更新的plunkr:http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p =preview
#3
3
You need to make some changes in controller and view.
您需要在控制器和视图中进行一些更改。
var app = angular.module('plunker', []);
app.controller('subCCtrl', function($scope) {
$scope.hideThisBox = false;
$scope.update = function(label) {
if (label == 'Cost')
$scope.displaybox = true;
else
$scope.displaybox = false;
}
});
app.controller('subACtrl', function($scope) {
});
app.controller('subBCtrl', function($scope) {
});
HTML :
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span6">
<a href="#" ng-click='update("Cost");displaybox=true;'>Cost</a>
<br />
<a href="#" ng-click='update("Savings");displaybox=fasle;'>Savings</a>
<br />
</div>
<hr />
<div ng-controller="subACtrl">Do stuff that uses subACtrl</div>
<div ng-controller="subBCtrl">Do stuff that uses subBCtrl</div>
<hr />
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span3">
<label>If click on 'Savings', hide below box: </label>
</div>
<div ng-hide="hideThisBox" class="span6">
<input type="text" ng-model="test2" ng-show="displaybox"/>
</div>
</div>
</div>
</body>
</html>
#4
0
I would recommend that you read up on Javascript scope. The issue with your code was the scope of ng-controllers
.
我建议您阅读Javascript范围。您的代码的问题是ng-controllers的范围。
#5
0
You already got your answer i guess, but for those who will come next here is some tips ^^ (hope it will hep):
你猜我已经得到了你的答案,但是对于那些将来到这里的人是一些提示^^(希望它会是肝脏):
-
ng-controller="myCtrl"
will set a new instance of the "myCtrl" controller, with i'ts own scopeng-controller =“myCtrl”将设置“myCtrl”控制器的新实例,具有自己的范围
-
The used scope will be the one of the firt div's controller it means that if you have something like:
使用范围将是firt div的控制器之一,这意味着如果你有类似的东西:
<div id="maindiv" ng-controller="myCtrl> <div id="subdiv1"> <div></div> <div> <div>some text</div> </div> </div> <div id="subdiv2" ng-controller="myCtrl"> <div> <span>-</span> <span>so</span> <span>this</span> <span>is</span> <span>a</span> <span>subdiv</span> <span>.</span> </div> </div> </div> </div>
- Subdiv1 will have the same scope as maindiv
- Subdiv1将与maindiv具有相同的范围
- But Subdiv2 will have it's own instance of the myCtrl controller's scope.
- 但是Subdiv2将拥有它自己的myCtrl控制器范围的实例。
- In a global way, Subdiv2's scope should have erited is data from the maindiv's scope.
- 从全局的角度来看,Subdiv2的范围应该是来自maindiv范围的数据。
Thats just a few easy tips and you will find more usefull ones on SO, or google, but anyway, if it can help some of you it will be cool.
这只是一些简单的提示,你会发现更多有用的SO或谷歌,但无论如何,如果它可以帮助你们中的一些人会很酷。
#1
10
Every time you use ng-controller, you make a new instance of said controller, with it's own scope. If you set subCCtrl on the body tag (or a new parent), and remove it from the two divs it is currently on, it works for me.
每次使用ng-controller时,都会使用自己的范围创建所述控制器的新实例。如果你在body标签(或一个新的父级)上设置subCCtrl,并从当前打开的两个div中删除它,它对我有用。
Other solutions you might want to look in to are by keeping "hideThisBox" on the root scope, broadcasting an event when clicking on save or by keeping it in a service.
您可能想要查看的其他解决方案是将“hideThisBox”保留在根作用域上,在单击“保存”时保留事件或将其保留在服务中。
#2
16
Same controller, but declared twice. therefor - two scopes.
Normally the solution is to move the ng-controller declaration one dom level higher (in your case, to the body element. once only), and have it only once. Otherwise, look into angular services.
相同的控制器,但声明了两次。因此 - 两个范围。通常,解决方案是将ng-controller声明移动一个dom级别(在您的情况下,移动到body元素。只有一次),并且只有一次。否则,请研究角度服务。
see updated plunkr: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
请参阅更新的plunkr:http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p =preview
#3
3
You need to make some changes in controller and view.
您需要在控制器和视图中进行一些更改。
var app = angular.module('plunker', []);
app.controller('subCCtrl', function($scope) {
$scope.hideThisBox = false;
$scope.update = function(label) {
if (label == 'Cost')
$scope.displaybox = true;
else
$scope.displaybox = false;
}
});
app.controller('subACtrl', function($scope) {
});
app.controller('subBCtrl', function($scope) {
});
HTML :
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span6">
<a href="#" ng-click='update("Cost");displaybox=true;'>Cost</a>
<br />
<a href="#" ng-click='update("Savings");displaybox=fasle;'>Savings</a>
<br />
</div>
<hr />
<div ng-controller="subACtrl">Do stuff that uses subACtrl</div>
<div ng-controller="subBCtrl">Do stuff that uses subBCtrl</div>
<hr />
<div ng-controller="subCCtrl" class="row-fluid">
<div class="span3">
<label>If click on 'Savings', hide below box: </label>
</div>
<div ng-hide="hideThisBox" class="span6">
<input type="text" ng-model="test2" ng-show="displaybox"/>
</div>
</div>
</div>
</body>
</html>
#4
0
I would recommend that you read up on Javascript scope. The issue with your code was the scope of ng-controllers
.
我建议您阅读Javascript范围。您的代码的问题是ng-controllers的范围。
#5
0
You already got your answer i guess, but for those who will come next here is some tips ^^ (hope it will hep):
你猜我已经得到了你的答案,但是对于那些将来到这里的人是一些提示^^(希望它会是肝脏):
-
ng-controller="myCtrl"
will set a new instance of the "myCtrl" controller, with i'ts own scopeng-controller =“myCtrl”将设置“myCtrl”控制器的新实例,具有自己的范围
-
The used scope will be the one of the firt div's controller it means that if you have something like:
使用范围将是firt div的控制器之一,这意味着如果你有类似的东西:
<div id="maindiv" ng-controller="myCtrl> <div id="subdiv1"> <div></div> <div> <div>some text</div> </div> </div> <div id="subdiv2" ng-controller="myCtrl"> <div> <span>-</span> <span>so</span> <span>this</span> <span>is</span> <span>a</span> <span>subdiv</span> <span>.</span> </div> </div> </div> </div>
- Subdiv1 will have the same scope as maindiv
- Subdiv1将与maindiv具有相同的范围
- But Subdiv2 will have it's own instance of the myCtrl controller's scope.
- 但是Subdiv2将拥有它自己的myCtrl控制器范围的实例。
- In a global way, Subdiv2's scope should have erited is data from the maindiv's scope.
- 从全局的角度来看,Subdiv2的范围应该是来自maindiv范围的数据。
Thats just a few easy tips and you will find more usefull ones on SO, or google, but anyway, if it can help some of you it will be cool.
这只是一些简单的提示,你会发现更多有用的SO或谷歌,但无论如何,如果它可以帮助你们中的一些人会很酷。