ng-style 未更新 div 的样式属性

Question

http://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview

我的 tags-modal 上有一个 ng-style="tghov.top" 但是它没有在标记中转换为 style="top:50!important"。

this.top = { "top" : "50px !important" };

  var app = angular.module('plunker', ['ui.bootstrap'])
  .component('tagHover', {
        template: `<section class="tags-modal"
          ng-show="tghov.tag.hoverDisplay"
          ng-style="tghov.top"
          ng-mouseleave="tghov.leave()">
          <h1>Hover for: {{ tghov.tag.term }}</h1>
          Top position: {{ tghov.top }}
        </section>`,
        controller: TagHoverController,
        controllerAs: 'tghov',
        bindings : {
            tag: '<'
        }
      });

  TagHoverController.$inject = [
      '$scope'
  ];

  function TagHoverController(
      $scope) {
        
      this.top = { "top" : "50px !important" };
  }

  app.controller('MainCtrl', function($scope) {
  });

  app.component('myComponent', {
    bindings: {},
    template: `<section class="tags-view">
        <div class="tags-column">
          <h1>Tags</h1>
          <div class="tags-container">
            <ul>
              <li ng-repeat="tag in tgs.tags">
                
                <div class="tag-container-container" ng-mouseleave="tgs.leaveTag(tag)">
                  <div class="tag-container">
                    <div class="tag" ng-mouseover="tgs.tagHover(tag)">{{ tag.term }}</div>
                    <tag-hover tag="tag"></tag-hover>
                  </div>
                </div>
                
              </li>
            </ul>
          </div>
        </div>
        <div class="tags-content">
          <div class="tags-box">
            <h2>Tags Content</h2> 
          </div>
        </div>
      </section>`,
    controllerAs: 'tgs',
    controller: TagsCtrl
  });


  TagsCtrl.$inject = [
      '$scope',
      '$uibModal'];

  function TagsCtrl(
      $scope,
      $uibModal) {
      ///////////////////////////////////
      
      this.hello = "hello world";
      
      this.leaveTag = (tag) => tag.hoverDisplay = false;
      
      this.tagHover = (tag) => tag.hoverDisplay = true;
      
      this.tags = [
        { id:0, term: 'apple'},
        { id:1, term: 'butter'},
        { id:2, term: 'charlie'},
        { id:3, term: 'duff'},
        { id:4, term: 'edward'},
        { id:5, term: 'freddy'},
        { id:6, term: 'george'},
        { id:7, term: 'henry'},
        { id:8, term: 'ink'},
        { id:9, term: 'joker'},
        { id:10, term: 'kevin'},
        { id:11, term: 'leon'},
        { id:12, term: 'mary'},
        { id:13, term: 'nancy'},
        { id:14, term: 'olivia'},
        { id:15, term: 'preston'},
        { id:16, term: 'quincy'},
        { id:17, term: 'robyn'},
        { id:18, term: 'steven'},
        { id:19, term: 'teddy'},
        { id:17, term: 'ulysses'},
        { id:18, term: 'victor'},
        { id:19, term: 'winston'},
        { id:20, term: 'xavier'},
        { id:20, term: 'yvette'},
        { id:21, term: 'zander'}
      ];
  }

/* Put your css in here */

body {
  font-family: Arial, sans-serif;
}

.tags-hover-container {
    float: left;
    position: fixed;
    z-index: 101;
    left: 240px;
    margin-top: 40px;
    width: 200px;
    height: auto;
}

.tags-column {
  z-index: 1;
  float: left;
  position: relative;
  overflow-y: auto;
  margin-top: 70px;
  max-width: 230px;
  min-width: 230px;
  height: calc(100% - 165px);
}

.tags-column li {
  list-style: none;
}

.tags-container {
  overflow-y: auto;
  height: 320px;
}

.tag-container-container { float: left; position: relative; width: 100%; }

.tag-container { float: left; position: relative; }

.tags-content {
  float: left;
  background: #f0f0f0;
}

.tags-box {
  float: left;
  padding: 20px;
  width: 320px;
  height: 640px;
  background: #4169E1;
}

.tags-box h2 {
  color: #fff;
}

.tag {
  margin: 0 10px 10px 0;
  padding: 9px 10px;
  width: auto;
  color: #fff;
  background: #3D3D3D;
  border-radius: 4px;
  cursor: pointer;
  clear: both;
}

.tag:hover {
  background: #656565;
}

.tags-modal {
  float: left;
  position: fixed;
  z-index: 101;
  left: 100px;
  margin-top: -20px;
  padding: 10px;
  width: 200px;
  height: auto;
  color: white;
  background: blue;
  border-radius: 4px;
}

.tags-modal:before {
    position: absolute;
    top: -8px;
    left: 26px;
    z-index: 99;
    content: '';
    display: block;
    height: 0; width: 0;
    border-bottom: 8px solid blue;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
    <script src="https://code.angularjs.org/1.5.4/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <my-component></my-component>
  </body>
</html>

Answer 1

我将 ng-style 修改为没有 !important 并将 position: "absolute" 属性添加到您的顶部属性，它现在似乎可以工作了.

您无需担心 !important，因为您将添加到 html 标签的样式属性中，该标签在 CSS 中具有最高优先级。

这是更新的插件：http://plnkr.co/edit/aOPLLSGCIongPArB2Z2p?p=preview

ng-style 未更新 div 的样式属性

ng-style not updating the style attribute of div

javascript

css

angularjs

ng-style

angularjs-ng-style