我有一个页面包含多个控制器,在同一页中的两个不同的div里使用了其中一个控制器。我不确定这是否是作用域问题,或者我的代码中是否有任何遗漏。
这是plunkr链接: http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
当用户点击“Savings”链接时,我想要隐藏文本框;当用户点击“Cost”链接时,我想要显示文本框。
我有一个页面包含多个控制器,在同一页中的两个不同的div里使用了其中一个控制器。我不确定这是否是作用域问题,或者我的代码中是否有任何遗漏。
这是plunkr链接: http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
当用户点击“Savings”链接时,我想要隐藏文本框;当用户点击“Cost”链接时,我想要显示文本框。
您需要在控制器和视图中进行一些更改。
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 :
<!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>
我猜你已经得到了答案,但对于那些接下来的人,这里有一些提示^^(希望它会有所帮助):
ng-controller="myCtrl"
会设置“myCtrl”控制器的一个新实例,具有自己的作用域
使用的作用域将是第一个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>
这只是一些简单的提示,您可以在 SO 或 Google 上找到更多有用的提示。无论如何,如果它能帮助到你们中的一些人,那就很酷了。
ng-controllers
的作用域。