How to pass a variable from a directive to a controller

Question

How to show or hide a div in a Html, related to a controller, using the variable from a directive.

Answer 1

To show or hide div in html use ng-show:

<div ng-show="myValue"></div>

when myValue is true div element will be visible ,if false then it will hide. you have to declare that my value in controller that is true or false such as scope.myValue=true;

More details here: Angularjs ng-show

Now passing variable from directive to controller this will help Easiest way to pass an AngularJS scope variable from directive to controller?

Answer 2

In below code I have showed ng-show and ng-hide using both examples using HTML to handle and controller to handle.

In first ng-hide hide the dhaarani name. In controller used to show the dhaarani name using

    $scope.hai = false;

inside timeout function

$timeout(countUp, 2000); 

Try below code.

var showApp = angular.module('showApp', [])

.controller('mainController', function($scope,$timeout) {
  
  // set the default value of our number
  $scope.myNumber = 0;
        
  // function to evaluate if a number is even
  $scope.isEven = function(value) {
    
    if (value % 2 == 0)
      return true;
    else 
      return false;
    
  };
  
   $scope.timeInMs = 0;
$scope.hai = true;
$scope.welcome = true;
    var countUp = function() {
         $scope.hai = false;
      alert("sgf");
    }

    $timeout(countUp, 2000);
  
});

.profilename{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="showApp" ng-controller="mainController">

    <div class="page-header text-center">
       <h1>ngShow and ngHide: Functions</h1>
    </div>

    <!-- ANIMALS =========================================================== -->
    <div class="row">
      <div class="col-xs-4">
        <form>
          <div class="form-group">
            <label>Type a Number</label>
            <input type="text" class="form-control" ng-model="myNumber">
          </div>
        </form>
      </div>      
      
      <div class="col-xs-8 jumbotron text-center">
        
        <!-- show if our function evaluates to false -->
        <div ng-show="isEven(myNumber)">
          <h2>The number is even.</h2>
        </div>
          
        <!-- show if our function evaluates to false -->
        <div ng-show="!isEven(myNumber)">
          <h2>The number is odd.</h2>
        </div>
      </div>
    </div>
    <div class="page-header text-center">
       <h1>ngShow and ngHide: using controller</h1>
    </div>
  <p ng-show="welcome">welcome</p>
  <p ng-hide="hai" class="profilename">Dhaarani</p>
</div>