Я не могу понять, почему директивы ngShow и ngHide не работают. Вот упрощенная версия проблемы.Угловой JS ngShow и ngHide
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
В контроллере
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = true;
}
"CONTACTINFO" никогда не показывает деление с, когда я нажимаю "CallFunction" DIV.
Ваша проблема известна в javascript мире как «точка». Идея заключается в том, что в javascript собственные значения передаются по значению, тогда как значения объектов передаются по ссылке. Попробуйте изменить ваш взгляд на это:
<div id="callFunction" ng-click="myFunction()">...</div>
<div id="contactInfo" ng-show="content.Show">...</div>
и изменить свой контроллер:
$scope.content.Show = false;
$scope.myFunction = function() {
$scope.content.Show = true;
}
Причина это будет работать, потому что вы теперь передавая объект вокруг и манипулировать объектом, а не просто манипулировать ценность. По существу, подумайте об этом как о проблеме «под-видимости», где ваш «div» порождает собственную область видимости, поэтому переменная, на которую вы ссылаетесь, является родным, она передает значение. Поэтому функция обновляет родительское значение, но не дочернее значение.
Для получения дополнительной информации: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
Это действительно проблема. –
This works for me. Я думаю, что ваша проблема может быть в другом месте.
HTML:
<div ng-controller="MyCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</div>
JavaScript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = true;
}
}
Я должен включать в себя код, чтобы разрешить ссылку JSFiddle.
HTML:
<div ng-controller="theCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</div>
JavaScript:
angular.module('appName', [])
.controller('theCtrl', ['$scope', function ($scope) {
$scope.showContent = false;
$scope.myFunction = function() {
$scope.showContent = !$scope.showContent;
}
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['appName']);
});
Там, кажется, не будет ничего плохого в том, что у вас есть. Вот ссылка на рабочий пример. aesmzz6q
Hah!Побей меня. – Tom
Это прекрасно работает:
<!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" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.3.11/angular.js" data-semver="1.3.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="callFunction" ng-click="myFunction()">content here</div>
<div id="contactInfo" ng-show="showContent">content here</div>
</body>
</html>
Я добавил скрипку: http://plnkr.co/edit/S06ufeHI2j5lKs5LxbRT?p=preview
Я также неподвижную вашу скрипку там были несколько вещей неправильно http://jsfiddle.net/97nkv1v1/4/
Упрощенный, он все еще не работает http://jsfiddle.net/jpking72/z6dd3z2b/ –
Вы не выбрали угловую библиотеку слева, я ее обновил, и она работает http://jsfiddle.net/z6dd3z2b/1/ –
вы можете забыть о контроллере и сделать все это в вашем HTML: '' 'нг-нажмите MyVar = '= myvar''''. Возможно, это решение, потому что вы не используете/scope/controller? – Silom
Нет ничего плохого в этом коде, это должно быть что-то еще, что вызывает проблему. Проверьте консоль браузера на наличие ошибок, также установите точку останова на функцию и убедитесь, что она нажата, когда вы нажимаете div – Neil
, можете ли вы произвести ошибку на скрипке plunker и т. Д.? –