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

Question

我已经编写了代码来做到这一点，但我的方式感觉如此不优雅，我不得不询问是否有人可以给我一些基本建议。基本上我想运行一些 JQuery 来修改 View 子集中按钮的属性(它们都在同一目录中)。我编写了 JQuery 来执行此操作，但我不知道将该代码放在哪里。

现在，我只是将 .js 文件插入这些 View 的目录中，并在每个 View 文件的末尾使用 include 语句。不完全是MVC......

情况

界面中出现几个没有可见标签的按钮。有关它们的所有信息都在 popover 属性中。只要您不是盲目的并且使用屏幕阅读器(不会拾取此弹出窗口文本)，这就很好(或者可能是糟糕的用户界面或其他什么)。我想将弹出窗口文本的内容复制到 aria-label

“手动”添加标签

现在，相关按钮是在 Angular 框架内创建的。按钮的 Jade 如下所示:

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')

(试图从生产版本中简化它)如果我只想向此按钮添加一个 aria-label，我可以像这样修改它:

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')

效果很好，但是还有几十个其他按钮都是用类似但不相同的代码创建的。我多次添加了这个 aria-label 行。那感觉……不优雅。所以我写了一些 JQuery!

“自动”添加标签

$( document ).ready(function() {
  $("button[popover]").each(function(){
    var text = $(this).attr('popover');
    //not everything has a popover-title. If it does we want that title for the aria-label
    if ($(this).attr('popover-title') !== undefined){
      var title = $(this).attr('popover-title');
      $(this).attr('aria-label', title);
    } else {
      //fall back to just using the popover text if no title is present
      $(this).attr('aria-label', text);
    }
  });
  //turns out some of the popovers are on divs which hold the 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);
  })
});

我为自己感到骄傲!它从跨 View 的许多行代码更改变成了这个简短的、可读的 JS 文件。

那个 JS 去哪儿了？？？!!!!？

我承认自己是 Angular 新手，但基本上我能找到的地方都没有添加此代码的意义。我结束的是页脚的 shared/ 中的 View 。我可以在那里添加脚本，它将在应用程序的每个路由上运行。这就是有人已经完成分析页脚的方法。但这种方法有两个问题:

1. 并非每个页面/路由/ View 都需要此 aria-label 修复。网站上的大多数按钮都有可读的标签。我可以添加检查以确保我没有覆盖现有的 aria-label 但这仍然意味着该脚本不必要地运行

2. 我不确定每个 View 都有弹出框文本或弹出框标题可用作 aria-label

所以，这就是我的立场。我不确定自定义 Controller (？)或其他东西是否是解决此问题的最佳方法。

如果你想看看这个项目(没有我的修改)this is the folder of 'views'我将在其中转储 .js 文件并向每个 View 添加 include 语句。

Answer 1

要在 AngularJS 中执行相同的操作，请创建一个自定义指令以将 aria-label 属性添加到弹出窗口中。

自动添加标签

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]);
        };
    };
});

DEMO on JSFiddle .