http://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=previewнг-стиль не обновляет атрибут стиля DIV
У меня есть нг-стиль = «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>
Ах спасибо! Также очень важно, что вы удалили '{}' Я только что сделал это в своем реальном приложении и, наконец, работал :) –
Рад, что я мог помочь! Я даже не понял, что сделал это :) –
Благодаря этому я, наконец, понял эту проблему lol! http://stackoverflow.com/questions/42209956/how-to-keep-position-of-these-taghovers-close-to-tags-while-scrolling-and-the-ta/42236022#42236022 –