2013-05-29 4 views
0

У меня есть angularjs приложение и <span> в нем. Я стараюсь, чтобы скрыть его ng-hide директивой, но:Выполняется в Angular.JS

<span ng-hide="hideSpan"> 

И

// controller code here 
.... 
$scope.hideSpan = true; 
.... 

Не работает, она игнорирует. И если я делаю:

// controller code here 
.... 
$scope.$apply(function(){$scope.hideSpan = true}); 
.... 

Я получаю сообщение об ошибке: $apply уже в процессе.

Как я могу правильно использовать ng-hide/ng-show?

спасибо.

+1

Вы можете показать нам больше кода? то, что вы делаете, должно работать до сих пор. –

ответ

1

Вы должны иметь возможность напрямую управлять функциями скрытия/шоу с вашего контроллера так же, как вы показываете. Ниже приведен пример работы с помощью кнопки, позволяющей переключить отображение скрытия.

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="myapp" ng-controller="mycontroller"> 
    <span ng-hide="hideSpan">Some Content to hide</span> 
    <button ng-click="toggleHide()"/>Toggle Hide</button> 
    </body> 

</html> 

И сценарий.

angular.module('myapp', []).controller('mycontroller', function($scope){ 
    $scope.hideSpan = true; 

    $scope.toggleHide = function(){ 
    if($scope.hideSpan === true){ 
     $scope.hideSpan = false; 
    } 
    else{ 
     $scope.hideSpan = true; 
    } 
    } 

    }); 

Я создал простой plunker, чтобы показать это в действии на http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview.

Что касается причин, по которым применяется $ apply, возникает ошибка, так как прямая область действия (предоставляемая переменными $ scopeProvider) уже просматривает изменения и завернуты в применяемые по умолчанию виды сортировки в ядре, так что любое изменение будет автоматически применено к другим связям этой переменной.

0

Вы можете просто изменить значение hideSpan в ng-click, сохранить несколько строк. ура

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="myapp" ng-controller="mycontroller"> 
    <span ng-hide="hideSpan">Some Content to hide</span> 
    <button ng-click="hideSpan=!hideSpan"/>Toggle Hide</button> 
    </body> 
Смежные вопросы