Question

我在指令中使用$watch时遇到问题。我想根据页面上的一些基本信息更新元素left和top。以下是我的代码：

＆＃13;

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" );
    }
  }
});

＆＃13;

.map {
  height: calc(100vh - 73px);
  width: 100%;
  }

.map img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

＆＃13;

<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>

＆＃13;

虽然该指令在页面加载时有效：所有plot-device元素都会获得带有left和top的样式。调整屏幕大小时，样式不会更新。

Answer 1

您在offset_x回调中仅设置 offset_y和$watch。除非指令初始化，否则您永远不会实际更新元素。

您需要angular.element(elem).css("left", ...)回调中的angular.element(elem).css("top", ...)和$watch行。（理想情况下，您可以将它们放在初始化和$watch回调中调用的函数中）

在旁注中，您可以收听$window.on('resize', function(event){})个事件，而不是使用观察者。

在Angularjs指令中观察屏幕大小的变化

1 个答案: