Question

我有一个AngularJS页面，它使用OpenLayers渲染地图。

我希望在地图上添加一个叠加层，以便点击它来显示一些信息。不幸的是，我似乎无法引用服务所需的DOM元素。

我试图避免在页面的HTML部分中放置<script>标记。

如果有人有更好的方法这样做，我全都耳朵。我是AngularJS的新手。

main.html （部分）

<h2>My Map</h2>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
  <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

<script src="Stylesheets/map.css"></script>

main.ctrl.js

angular.module("app").controller("MainController", function($scope, openlayers){
    openlayers.init();
    $scope.selected = openlayers.selected;
});

openlayers.js

angular.module("app").factory("openlayers", function($document){

    var init = function(){

        /*
         * Elements that make up the popup.
         */
        var container = $document[0].getElementById('popup');
        var content = $document[0].getElementById('popup-content');
        var closer = $document[0].getElementById('popup-closer');
    };

    return {
        init: init,
        selected: activeVector,
        cities: cities
    };

});

Answer 1

要回答您的问题，您可以通过Angular的jqLite访问DOM元素。

但至于更好的方法，我只需使用position: absolute将覆盖元素放在主元素上，然后像这样使用ngClick：

angular
  .module('app', [])
  .controller('MainController', MainController)
;

function MainController($scope) {
  $scope.fn = function() {
    console.log('foo');
  };
}

.wrapper {
  position: relative;
}

.main {
  border: 2px solid black;
  width: 300px;
  height: 300px;
}

.overlay {
  background-color: red;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>


<div class='wrapper' ng-app='app' ng-controller='MainController'>
  <div class='main'></div>
  <div class='overlay' ng-click='fn()'></div>
</div>

Answer 2

通过DOM访问服务不是一个好习惯。应使用服务在 控制器 之间传递数据，而不是更改DOM数据。如果要创建通用方法，可以创建一个模块“ commons ”来封装它们并提供对其他控制器的访问。

您可以使用指令来操作DOM数据。当您想要从自定义元素中编写元素/行为时，建议使用此方法。

使用指令查看此示例：

angular.module('app').controller('MainController', function($scope, openlayers){
    console.log('Container: ' + $scope.container);
    console.log('Content:   ' + $scope.content);
    console.log('Closer:    ' + $scope.closer);
});

angular.module('app', []).directive('openlayersDirective',  function() {
    return {
        link: function($scope, element) {
            var init = function(){
                $scope.container = angular.element(element).find('#popup');
                $scope.content   = angular.element(element).find('#popup-content');
                $scope.closer    = angular.element(element).find('#popup-closer');
            };
        }
    };
});

在html put指令中：

<body openlayersDirective>
    <div>
        .
        .
        .
    </div>
</body>

AngularJS从服务访问DOM

2 个答案: