Question

如何使用指令中的变量显示或隐藏与控制器相关的Html中的div。

Answer 1

要在html中显示或隐藏div，请使用ng-show：

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

当myValue为真时，div元素将可见，如果为false，则它将隐藏。你必须在控制器中声明我的值为真或假，例如scope.myValue=true;

此处有更多详情：Angularjs ng-show

现在将变量从指令传递给控制器，这将有助于Easiest way to pass an AngularJS scope variable from directive to controller?

Answer 2

在下面的代码中，我展示了ng-show和ng-hide，使用HTML来处理和控制器来处理。

在第一个ng-hide中隐藏了dhaarani的名字。在用于显示dhaarani名称的控制器中使用

    $scope.hai = false;

内部超时功能

$timeout(countUp, 2000);

尝试以下代码。

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>

如何将变量从指令传递给控制器

2 个答案: