0
$watchの指示に問題があります。私は、ページ上のいくつかの基本情報に基づいて、要素leftとtopを更新したいと思います。以下は私のコードです：指示文の画面サイズの変更を確認する
var myApp = angular.module("myApp", []);
var offset_x_function = function(){
return (($('.map').width()/2) - ($('#map_display_img').width()/2));
}
var offset_y_function = function(){
return (($('.map').height()/2) - ($('#map_display_img').height()/2));
}
myApp.directive("plotDevice", function($window){
offset_x = offset_x_function();
offset_y = offset_y_function();
return {
restrict: 'A',
link: function(scope, elem, attrs){
scope.$watch(function(){
return $window.innerWidth;
}, function(value) {
offset_y = offset_y_function();
offset_x = offset_x_function();
});
scope.$watch(function(){
return $window.innerHeight;
}, function(value) {
offset_y = offset_y_function();
offset_x = offset_x_function();
});
angular.element(elem).css("left", (parseInt(offset_x) + parseInt(attrs["x"])).toString() + "px");
angular.element(elem).css("top", (parseInt(offset_y) + parseInt(attrs["y"])).toString() + "px");
}
}
});.map {
height: calc(100vh - 73px);
width: 100%;
}
.map img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="map">
<img id="map_display_img" src="some/image/path" width="1000" height="1000" />
<div plot-device data-x="100" data-y="200"><p>item over image</p></div>
</div>ページのロード時ディレクティブは動作しますが：すべてのplot-device要素はleftとtopでスタイルを取得します。画面サイズを調整すると、スタイルは更新されません。