angularjs – 自定义行为 – 切换类 – 弹出 – Angular UI boot

发布时间：2020-12-17 17:19:50 所属栏目：安全来源：网络整理

导读：我想在调用各种Angular UI指令时向元素添加活动类.例如,当我调用popover时,我想突出显示元素(在此 case is a button中).我知道我可以添加带表达式的ng-click,但我想要一个更强大的解决方案. 我不知道如何修改directive(s),所以我能够获得目标元素并切换类.我

我想在调用各种Angular UI指令时向元素添加活动类.例如,当我调用popover时,我想突出显示元素(在此 case is a button中).我知道我可以添加带表达式的ng-click,但我想要一个更强大的解决方案.

我不知道如何修改directive(s),所以我能够获得目标元素并切换类.我创造了一个小提琴,我希望有人可以帮助这个.

我感谢帮助人员,谢谢.

解决方法

Angular不会限制您定义与ui-bootstrap中的指令同名的指令.这并不意味着你覆盖它们(尽管你可以),你只需要加以应用它们.只要您不破坏其原始功能,您就可以执行以下操作：

app.directive("popover",function () {
  return {
    restrict: 'EA',priority: -1000,// Run last
    link: function (scope,element) {
      element.addClass("my-popover");
      scope.$watch('tt_isOpen',function (value) {
        if (value) {
          element.addClass("open");
        } else {
          element.removeClass("open");
        }
      });
    }
  };
});

app.directive("tooltip",element) {
      element.addClass("my-tooltip");
      scope.$watch('tt_isOpen',function (value) {
        if (value) {
          element.addClass("open");
        } else {
          element.removeClass("open");
        }
      });
    }
  };
});

然后定义样式,如：

.my-popover.open {
    background-color: red; 
}

.my-tooltip.open {
    font-style:italic;
    color: orange;
}

不幸的是,你有点依赖于原始的实现细节(这个tt_isOpen来自哪里).

看看here.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!