Skip to content

Instantly share code, notes, and snippets.

@rlugge
Created October 30, 2013 02:53
Show Gist options
  • Save rlugge/7226527 to your computer and use it in GitHub Desktop.
Save rlugge/7226527 to your computer and use it in GitHub Desktop.
'use strict';
angular.module('inclassWork1App')
.directive('myShow', function(){
return {
// name: '',
// priority: 1,
// terminal: true,
scope: {
myShow:'='
},
// cont­rol­ler: function($scope, $element, $attrs, $transclue) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
// template: '',
// templateUrl: '',
// replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller) {
if (!$scope.myShow) {
iElm.fadeOut(0);
};
$scope.$watch('myShow', function(newValue, oldValue){
if (newValue!=oldValue && newValue) {
console.log('showing');
iElm.show('slide',{},500,function(){
setTimeout(function(){
$scope.$apply(function(){
console.log('Setting show to false');
iElm.fadeOut(500, function(){
$scope.$apply(function(){
$scope.myShow=false;
})
});
})
},1000)
});
}else{
console.log('hiding');
}
});
}
};
});
<div class="hero-unit">
<p>Can you see the rainbow?</p>
<p my-show="raining">Yes!</p>
<p my-show="!raining">No</p>
<button ng-click="raining=true" ng-hide='raining'>Make it rain</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment