{{showSubHeader}}
<div ng-show="showSubHeader" class="topPull" draggable >
<button class="button-icon ion-bag"></button>
</div>
</div>
The expressions {{showSubHeader}}
changes from true to false and false to true just fine.
showSubHeader has a boolean value .
ie showSubHeader=true
or showSubHeader=false
The value changes are being picked up by angular . As I change the value, I see in console that ng-show expression changes but it does not hide the element even if it is ng-show="false".
How do I fix this? What seems wrong?>
Edit: draggable is a directive that looks like this:
.directive('draggable', function ($animate) {
return function(scope, element) {
var startX = 0, startY = 0, x = 0, y = 0;
var el = element[0];
console.log(el)
el.draggable = true;
element.css({
position: 'relative',
cursor: 'pointer'
});
el.addEventListener(
'dragstart',
function(e) {
element.addClass("animated slideInDown")
return false;
},
false
);
el.addEventListener(
'dragend',
function(e) {
element.addClass("animated slideInUp")
scope.checkBill();
return false;
},
false
);
}
})
checkBill
$scope.checkBill= function(){
$scope.$apply(function(){
$scope.showSubHeader=false;
})
$state.go('menu.TotalBill', {}, {inherit: true, notify:true})
}
Try :
<div ng-show="showSubHeader === true" class="topPull" draggable >
<button class="button-icon ion-bag"></button>
</div>
You can try to isolate ng-show:
<div ng-show="showSubHeader">
<div class="topPull" draggable >
<button class="button-icon ion-bag"></button>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.