0

I am trying to toggle a div on button click like as bellow.

This is working.

<div>
    <button ng-click='x = ! x'>toggle</button>
</div>  
<div  ng-include="'pages/include/search.html'" ng-show='x'></div>

This is not working.

<div ng-if="$state.current.url!='/splash'" >
    <button ng-click='x = ! x'>toggle</button>
</div>  
<div  ng-include="'pages/include/search.html'" ng-show='x'></div>

Why it is not working, when I add ng-if="$state.current.url!='/splash'" ?

Magicprog.fr
  • 4,072
  • 4
  • 26
  • 35
Shijin TR
  • 7,516
  • 10
  • 55
  • 122
  • Possible duplicate of [AngularJS: ng-if not working in combination with ng-click?](http://stackoverflow.com/questions/19812116/angularjs-ng-if-not-working-in-combination-with-ng-click) – Motin Feb 16 '17 at 09:28

1 Answers1

1

Well,

Every angular directive create new scope

In the code below

<div ng-if="$state.current.url!='/splash'" >
   <button ng-click='x = ! x'>toggle</button>
  </div>  
 <div  ng-include="'pages/include/search.html'" ng-show='x'></div>

The ng-if directive create new scope.And withing this scope the value of x is updated on button click.But this new value of x is not accessible outside this ng-if div as it is local to that scope and it is primitive type. Since this x is primitive type so there is no data update as reference are differant.

You should use object model instead.

Here is the updated HTML

<div ng-if="$state.current.url!='/splash'" >
   <button ng-click='x.showHide = ! x.showHide'>toggle</button>
  </div>  
 <div ng-include="'pages/include/search.html'" ng-show='x.showHide'>This is div</div>

define x like this one in your controller.

$scope.x = {showHide:false}

EDIT-

In your first woking HTML, there is not directive on div.So, both these DIV come under same scope.So,x accessible across this two DIV with updated value.

<div>
<button ng-click='x = ! x'>toggle</button>
</div>  
<div  ng-include="'pages/include/search.html'" ng-show='x'></div>
RIYAJ KHAN
  • 15,032
  • 5
  • 31
  • 53