如何將指令中的變量傳遞給控制器​​

Question

如何使用指令中的變量在Html中顯示或隱藏與控制器相關的div。

Answer 1

要顯示或在HTML中使用NG-顯示隱藏的div：

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

時myValue是真實的div元素將是可見的，如果爲假，則它會隱藏。 您必須聲明，我在控制值是true或false如scope.myValue=true;

更多細節在這裏：Angularjs ng-show

現在傳遞變量從指令控制器，這將有助於Easiest way to pass an AngularJS scope variable from directive to controller?

Answer 2

在下面的代碼我使用HTML處理和控制器處理這兩個示例都顯示了ng-show和ng-hide。

在第一次隱藏隱藏的dhaarani名稱。在控制器中使用使用

$scope.hai = false; 

超時函數內部下面的代碼

$timeout(countUp, 2000); 

嘗試顯示dhaarani名稱。

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>