У меня есть страница с несколькими контроллерами, один из контроллеров используется в двух разных div на одной странице. Я не уверен, что это проблема с областью, или я просто что-то пропустил в своем коде.
здесь находится plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview
Я хочу скрыть текстовое поле, когда пользователь нажимает ссылку "Сбережения", отображает поле при нажатии ссылки "Стоимость".
Каждый раз, когда вы используете ng-контроллер, вы создаете новый экземпляр указанного контроллера с его собственной областью. Если вы установите subCCtrl на тег body (или новый родительский элемент) и удалите его из двух разделов, он в настоящий момент включен, он работает для меня.
Другие решения, к которым вы можете захотеть, - это сохранить "hideThisBox" в корневой области, передавая событие при нажатии на сохранение или сохраняя его в службе.
Тот же контроллер, но объявлен дважды. поэтому - две области.
Обычно решение состоит в том, чтобы переместить объявление ng-controller на один уровень выше (в вашем случае, до элемента body. один раз) и иметь его только один раз. В противном случае просмотрите службы angular.
см. обновленный plunkr: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
Вам нужно внести некоторые изменения в контроллер и просмотр.
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="[email protected]" 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>
Я бы рекомендовал вам ознакомиться с областью Javascript. Проблема с вашим кодом была в области ng-controllers.
Вы уже получили свой ответ, я думаю, но для тех, кто придет сюда, вот несколько советов ^^ (надеюсь, что это будет hep):
ng-controller="myCtrl"
установит новый экземпляр контроллера myCtrl, i'ts
Используемая область будет одним из контроллеров 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>
Вот только несколько простых советов, и вы найдете более полезные в SO или google, но в любом случае, если это может помочь некоторым из вас, это будет круто.