如何将指令中的变量传递给控制器​​

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>