javascript - Angular: Run some JQuery against a selection of views -

i wrote code this, way did felt so inelegant had ask if had basic advice me. want run jquery modify attributes of buttons in sub-set of views (they're in same directory). wrote jquery i cannot figure out put code.

right i'm shoving .js file in views' directory , using include statement toward end of each view file. not mvc......

situation

several buttons appear in interface no visible label. info them in popover attribute. fine (or maybe it's bad ui or whatever) long you're not blind , using screen-reader, won't pick popover text. want copy contents of popover text aria-label

adding labels "manually"

right button in question created within angular framework. jade button looks this:

button.customize-option(class='pet_egg_{{::egg}}',    ng-class='{selectableinventory: selectedpotion && !(user.items.pets[egg+"-"+selectedpotion.key]>0) && (content.dropeggs[egg] || !selectedpotion.premium)}',    popover-title!=env.t("egg", {eggtype: "{{::content.eggs[egg].text()}}"}),    popover-trigger='mouseenter', popover-placement='right') 

(tried simplify production version) if wanted add aria-label button modify so:

button.customize-option(class='pet_egg_{{::egg}}',     ng-class='{selectableinventory: selectedpotion && !(user.items.pets[egg+"-"+selectedpotion.key]>0) && (content.dropeggs[egg] || !selectedpotion.premium)}',     popover-title!=env.t("egg", {eggtype: "{{::content.eggs[egg].text()}}"}),     aria-label!=env.t("egg", {eggtype: "{{::content.eggs[egg].text()}}"}),     popover-trigger='mouseenter', popover-placement='right') 

and works great, buuuuuut there several dozen other buttons created similar not-identical code. adding aria-label line several dozen times. felt... inelegant. wrote jquery!

adding labels "automatically"

$( document ).ready(function() {   $("button[popover]").each(function(){     var text = $(this).attr('popover');     //not has popover-title. if want title aria-label     if ($(this).attr('popover-title') !== undefined){       var title = $(this).attr('popover-title');       $(this).attr('aria-label', title);     } else {       //fall using popover text if no title present       $(this).attr('aria-label', text);     }   });   //turns out of popovers on divs hold button   $("div[popover]").each(function(){     var label = "";     if ($(this).attr('popover-title') !== undefined){       label = $(this).attr('popover-title');     } else {       label = $(this).attr('popover');     }     $(this).find("button").attr('aria-label', label);   }) }); 

i pretty proud of myself! went many many lines of code changes across views 1 short, readable js file.

where js go???!?!?

i admit being angular neophyte, none of spots find made sense adding code. closes came view in shared/ footer. add script there , run on every route app. that's how had done analytics footer already. there 2 problems approach:

1. not every page/route/view needs aria-label fix. buttons on site have readable labels. add checks make sure didn't overwrite existing aria-label still mean script running unnecessarily

2. i'm not every view has popover text or popover-title work aria-label

so, that's stand. i'm not if custom controller (?) or best approach resolve this.

if want take @ project (without changes) this folder of 'views' dumping .js file , adding include statement every view.

to same thing in angularjs, create custom directive add aria-label attribute popovers.

add labels automatically

angular.module('myapp').directive('popover', function () {     return function(scope,elem,attrs) {         var text, title, label ;         if (elem[0].tagname == "button") {             text = attrs.popover;             if (attrs.popovertitle) {                 title = attrs.popovertitle;                 attrs.$set('arialabel', title);             } else {                 attrs.$set('arialabel', text);             };             console.log(elem[0]);         };         if (elem[0].tagname == "div") {             label = "";             if (attrs.popovertitle) {                 label = attrs.popovertitle;             } else {                 label = attrs.popover;             }             var button = elem.find("button");             button.attr('aria-label', label);             console.log(button[0]);         };     }; }); 

the demo on jsfiddle.