html - 如何在 Angular JS 中获取按钮的徽章值

Question

我想要一个 Button 的徽章值，这代表徽章是 data-text-as-pseudo-element 我是 Angular 的新手，我该如何获取它？

    <style 
    type="text/css">[data-text-as-pseudo-element]::before { content: attr(data-text-as-pseudo-element); }
    </style>


        <button role="tab" title="Chats" tabindex="0" aria-label="Chats, 1
           unread notification." aria-selected="true" style="position: relative;
           display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0;
           overflow: hidden; align-items: center; justify-content: center;
           background-color: transparent; border-color: transparent; text-align:
           left; border-width: 0px; width: 80px; padding-top: 2px; height: 50px;
           cursor: pointer; border-style: solid;">
    <div role="none"
           style="position: relative; display: flex; flex-direction: column;
           flex-grow: 0; flex-shrink: 0; overflow: hidden; align-items: center;
           justify-content: center; width: 80px; height: 50px;">
    <div
           aria-hidden="true" data-text-as-pseudo-element="" style="position:
           relative; display: inline; flex-grow: 0; flex-shrink: 0; overflow:
           hidden; white-space: pre-wrap; overflow-wrap: break-word; height:
           20px; font-size: 20px; color: rgb(0, 120, 212); background-color:
           rgba(0, 0, 0, 0); font-family: SkypeAssets-Light; padding: 0px;
           cursor: inherit;"></div><div data-text-as-pseudo-element="Chats"
           style="position: relative; display: inline; flex-grow: 0;
           flex-shrink: 0; overflow: hidden; white-space: pre; text-overflow:
           ellipsis; font-size: 10px; color: rgb(0, 120, 212); font-family:
           &quot;SF Regular&quot;, &quot;Segoe System UI Regular&quot;,
           &quot;Segoe UI Regular&quot;, sans-serif; font-weight: 400;
           text-align: center; margin-top: 2px; align-self: stretch; cursor:
           inherit;"></div><div role="none" aria-hidden="true" style="position:
           absolute; display: flex; flex-direction: column; flex-grow: 0;
           flex-shrink: 0; overflow: visible; align-items: center; height: 24px;
           width: 30px; top: 0px; right: 12px; justify-content: center;">
    <div
           role="none" style="position: relative; display: flex; flex-direction:
           column; flex-grow: 0; flex-shrink: 0; overflow: hidden; align-items:
           center; justify-content: center; height: 20px; min-width: 20px;
           border-radius: 10px; background-color: rgb(244, 67, 54);
           padding-left: 4px; padding-right: 4px; width: 20px; border-color:
           rgb(240, 244, 248); border-width: 2px; border-style: solid;">
    <div
           data-text-as-pseudo-element="1" style="position: relative; display:
           inline; flex-grow: 0; flex-shrink: 0; overflow: hidden; white-space:
           pre; text-overflow: ellipsis; color: rgb(255, 255, 255); font-size:
           10px; line-height: 10px; text-align: center; background-color:
           rgba(0, 0, 0, 0); font-family: &quot;SF Bold&quot;, &quot;Segoe
           System UI Bold&quot;, &quot;Segoe UI Bold&quot;, sans-serif;
           font-weight: 400; cursor: inherit;">
    </div>
    </div>
    </div>
    </div>
    </button>

有什么建议吗？

提前致谢!!

Answer 1

我准备了一个工作示例。不幸的是，此代码在 IE11 中不起作用。为了使其在 IE11 中工作，必须调整 CSS。

示例基于此处的解决方案: Link

要点是链接上的示例:您指出，您对“数据计数”属性有多少通知:

<button class="notification-button" data-count="5"></button>

要使其在 angularjs 中动态化，您必须使用 ng-attr-* 指令将此属性与范围 varialbe 绑定(bind)

<button class="notification-button" ng-attr-data-count="{{counter}}"></button>

AngularJS docs gn-attr-*

When to use ng-attr?

angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

myCtrl.inject = ['$scope'];

function myCtrl($scope) {
  $scope.counter = 0;

  $scope.increment = function() {
    $scope.counter++;
  }
}

.notification-button {
  background: linear-gradient(to bottom, rgba(37, 130, 188, 1) 0%, rgba(41, 137, 216, 1) 32%, rgba(41, 137, 216, 1) 42%, rgba(175, 224, 234, 1) 100%);
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: none;
  margin-top: 40px;
  margin-left: 40px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.notification-button:before {
  content: attr(data-count);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  display: block;
  border-radius: 50%;
  background: rgb(67, 151, 232);
  border: 1px solid #FFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #FFF;
  position: absolute;
  top: -7px;
  left: -7px;
}

.notification-button.badge-top-right:before {
  left: auto;
  right: -7px;
}

.notification-button.badge-bottom-right:before {
  left: auto;
  top: auto;
  right: -7px;
  bottom: -7px;
}

.notification-button.badge-bottom-left:before {
  top: auto;
  bottom: -7px;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCtrl">

<head>
  <meta charset="UTF-8">
  <title>Test</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>

<body>

  <button ng-click="increment();">Increment</button>

  <div>
    {{counter}}
  </div>

  <button class="notification-button" ng-attr-data-count="{{counter}}"></button>


</body>

</html>