NG-風格不更新DIV

Question

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

的樣式屬性我有一個NG風格=「tghov.top」我tags-modal但是它沒有轉化爲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標記的style屬性中，該標記在CSS中具有最高優先級。

這裏是更新的跳閘者：http://plnkr.co/edit/aOPLLSGCIongPArB2Z2p?p=preview