Call function when hidden element is shown - angularjs

Question

Is it possible to call a function on the controller when a ng-show sets to true and an previous hidden element is visible? I need a directive to run a function when the element it is inside goes from hidden to visible.
<div ng-show="showOrNot" >
This is secret text.
<my-directive> I need to call a function </my-directive>
</div>

Answer 1

You can use ng-init to call function and use ng-if here is example:
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

You can simply pass the showOrNot scope to your directive's scope. Then $watch it and add the desired logic after the value changes.
Simply:
<my-directive value-to-watch="showOrNot">I need to call a function</my-directive>
Then the 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

you can use $watch in your controller inorder to call a function when it is true.
<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
}
});
}
}
}
you can write something like this.