Last active
August 29, 2015 14:04
-
-
Save young-steveo/29dec391126238005e5e to your computer and use it in GitHub Desktop.
Developing With AngularJS? Forget jQuery Exists.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div cool-stuff> | |
<ul> | |
<li class="active"><a class="link" href="#one">Click Me For One</a></li> | |
<li><a class="link" href="#two">Click Me For Two</a></li> | |
</ul> | |
<p id="one" class="content">Some Cool stuff</p> | |
<p id="two" class="content hidden">Some Other Stuff</p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular | |
.module('MyApp', []) | |
.directive('coolStuff', function() { | |
return function(scope, element) { | |
element.find('a.link').on('click', function(e) { | |
var link = $(e.currentTarget); | |
// make the current li have the active class and remove it from others | |
link | |
.parent('li') | |
.addClass('active') | |
.siblings('li') | |
.removeClass('active'); | |
// hide all content divs | |
element.find('.content').addClass('hidden'); | |
// show the one content div I want | |
$(link.attr('href')).removeClass('hidden'); | |
e.preventDefault(); | |
}); | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular | |
.module('MyApp', []) | |
.directive('coolStuff', function() { | |
return function(scope, element) { | |
element.find('a.link').on('click', function(e) { | |
var link = angular.element(e.currentTarget); | |
link | |
.parent('li') | |
.addClass('active') | |
.siblings('li') | |
.removeClass('active'); | |
element.find('.content').addClass('hidden'); | |
angular.element(link.attr('href')).removeClass('hidden'); | |
e.preventDefault(); | |
}); | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div cool-stuff> | |
<ul> | |
<li ng-class="{ active : active.one }"> | |
<a class="link" href="#" ng-click="select('one')">Click Me For One</a> | |
</li> | |
<li ng-class="{ active : active.two }"> | |
<a class="link" href="#" ng-click="select('two')">Click Me For Two</a> | |
</li> | |
</ul> | |
<p class="content" ng-if="active.one">Some Cool stuff</p> | |
<p class="content" ng-if="active.two">Some Other Stuff</p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular | |
.module('MyApp', []) | |
.directive('coolStuff', function() { | |
return function(scope) { | |
var setFalse = function(val, link, active) { | |
active[link] = false; | |
}; | |
scope.active = {}; | |
scope.select = function(link) { | |
_.each(scope.active, setFalse); // lodash used for brevity | |
scope.active[link] = true; | |
}; | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment