Функция вызова, когда отображается скрытый элемент.

Question

Можно ли вызвать функцию на контроллере, когда ng-show устанавливает значение true и отображается предыдущий скрытый элемент? Мне нужна директива для запуска функции, когда элемент, внутри которой он находится, переходит от скрытого к видимому.

<div ng-show="showOrNot" > 
 
    This is secret text. 
 
    <my-directive> I need to call a function </my-directive> 
 
    </div>

Answer 1

Вы можете использовать нг-инициализации вызвать функцию и использовать нг-если вот пример:

var app = angular.module('app',[]); 
 
app.controller('Demo',['$scope', Demo]); 
 
function Demo($scope){ 
 
    $scope.showOrNot = false; 
 
    $scope.Show = function(){ 
 
    $scope.showOrNot = true; 
 
    alert("shown"); 
 
    } 
 
    $scope.hello = function(){ 
 
    alert("function call!"); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div ng-app="app" ng-controller="Demo"> 
 
<div ng-if="showOrNot"> 
 
    <div ng-init="hello()">This is secret text.</div> 
 
</div> 
 
    <button ng-click="Show()">click</button> 
 
    </div>

Answer 2

Вы можете просто передать showOrNot простор для охвата вашей директивы. Затем $watch и добавьте нужную логику после изменения значения.

Просто:

<my-directive value-to-watch="showOrNot">I need to call a function</my-directive> 

Тогда директива:

angular.module('app').directive('myDirective', function() { 
    return { 
    restrict:'E', 
    scope: { 
     valueToWatch:'=' 
    }, 
    controller: function($scope) { 
     $scope.$watch('valueToWatch', function (newValue, oldValue) { 
      //Case when new value is true and old value is false 
      if(newValue && !oldValue) { 
      //Call the function you want 
      } 
     }); 
    } 
    } 
}) 

Answer 3

вы можете использовать $ наблюдать в контроллере Симметричного вызвать функцию, когда она верна.

<my-directive content="showOrNot"> I need to call a function </my-directive> 

.directive('myDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     content: '=', 
    } 
    link: function (scope, element) { 
     scope.$watch('content', function (newvalue, oldvalue) { 
     if(newvalue == true) 
     { 
      //your function here 
     } 
    }); 
    } 
    } 
} 

вы можете написать примерно так.