ディレクティブからコントローラに変数を渡す方法

Question

ディレクティブの変数を使用して、コントローラに関連するHTMLのdivを表示または非表示にする方法。

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

myValueは、それが非表示になりますfalseの場合、真のdiv要素は、表示されますとき：HTMLの使用NG-ショーでのdivを表示または非表示にするに

Answer 1

。 あなたは、コントローラの私の価値はここのようなscope.myValue=true;

詳細真か偽であることを宣言する必要があります。Angularjs ng-show

さて、これは以下のコードIでEasiest way to pass an AngularJS scope variable from directive to controller?

Answer 2

を助けるコントローラに指令から変数を渡します両方の例を使ってng-showとng-hideを表示し、処理するHTMLとハンドルを使用しています。

最初にng-hideでdhaaraniの名前を非表示にします。

$timeout(countUp, 2000); 

タイムアウト関数内

$scope.hai = false; 

を用い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>