Rewriting simple jquery code in angular style

Question

I have a jquery code that checks for the class .slide on pageload. I have .slide classes inside my templates that it doesn't find and I am trying to figure out a way to make them find it. (probably by making a directive?)

If anyone has any ideas, I'd greatly appreciate it.

The code is as follows:

var items = $('.slide');
var content = $('.content');

function open() {
    $(items).removeClass('close').addClass('open');
}

function close() {
    $(items).removeClass('open').addClass('close');
}

$('#navToggle').on(clickevent, function(event) {
    event.stopPropagation();
    event.preventDefault();
    if (content.hasClass('open')) {
        close();
    } else {
        open();
    }
});
content.click(function() {
    if (content.hasClass('open')) {
        close();
    }
});

Can you add a jsFiddle or plunkr? Are you getting any error or the plugin just doesn't work? — Praveen Singh, Jul 28 '15 at 17:51
Never said the plugin didn't work. The plugin runs this when the index pages loads. Doesn't end up finding `.slide` content in templates loaded after that. @pravee-n — bryan, Jul 28 '15 at 17:52
Please add a code snippet/jsFiddle, it'll be easier to debug. — Praveen Singh, Jul 28 '15 at 17:54
@pravee-n There is nothing to debug..please re-read the question. — bryan, Jul 28 '15 at 17:56
@roamer-1888 I guess there is no plugin, just trying to port the code above to angular. — bryan, Jul 28 '15 at 17:57
there are nothing to port, needs to be written in angular style — Vasyl, Jul 28 '15 at 18:01
you can write a directive for a specific class. thats the way to go. — Ozan Tabak, Jul 28 '15 at 18:07
To get yourself into the right mindeset, you could do worse that read through the answers [here](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). — Roamer-1888, Jul 28 '15 at 18:13
you need declare directive with template something like this: `
` — Vasyl, Jul 28 '15 at 18:13

score 0 · Answer 1 · answered Jul 28 '15 at 18:29

You can create a directive with the same name as your class name:

Say you have two spans with one you need to distinguish using class 'myclass':

<div ng-app="ClassExample" ng-controller="someController">
    <span class="myclass myotherclass">target span</span><br/>
    <span class="myotherclass">other span</span>
</div>

Then the accompanying js code would include a directive definition using the name of the class 'myclass' and you can restrict this directive to classes using restrict:'C' :

angular.module('ClassExample',[]).directive('myclass', function() {
    return {
        template:'hello world',
        restrict: 'C'
    };

}).controller('someController',function() {

});

Here is the fiddle: https://jsfiddle.net/1L3h8y7s/1/

Rewriting simple jquery code in angular style

1 Answers1