使用Angular 1.5创建指令

时间:2016-10-10 21:01:56

标签: angularjs angularjs-directive openlayers-3

我正在尝试使ng-repeat的{​​{1}}内的Angular 1.5指令工作。我需要做的一些事情(如果我以完全错误的方式解决这个问题,请告诉我):

1)每当提供新结果时更新html。最重要的是,链接函数被调用一次,结果为空,并且从不再被调用。所以,我的桌子是空白的。始终。
2)在'模板内部'在指令中,我引用了控制器的名称和类型耦合的方法。是对的'这样做的方法?

这是我的代码片段......

模块a.view.html

table

已更新 common.td-result.directive.js

<table>
<tr ng-repeat="(ii,result) in moduleACtrl.results">
   <td>This is a normal TD</td>
   <td-result result="{{result}}" ctrlName="moduleACtrl"></td-result>
</tr>
</table>

在阅读了有关StackOverflow的一些相关问题并重新审核Angular的指令文档后,我无法弄清楚如何做我想做的事情。

我在这里得到的总体情况是我有一张OpenLayers 3地图,显示查询的结果数据。我点击地图上的结果数据会以交互方式显示结果数据,如下所示:http://openlayers.org/en/latest/examples/getfeatureinfo-image.html

但不同的是,我使用的是Angular 1.5。我有一个带有控制器的ModuleA和容纳地图的视图。我有另一个ModuleCommon,它包含一个处理地图对象创建的服务,并将其交给ModuleA.controller(或任何想要地图服务的控制器)。所以,现在,我必须为地图服务创建一个接口,该接口可以一般地处理向想要呈现所述数据的任何客户端显示数据。

1 个答案:

答案 0 :(得分:0)

我认为这是一个坏主意,我需要退一步。首先,map对象不应该负责显示数据。地图负责处理“唱片”。事件并给我一个功能。

所以,我决定通过地图服务实例化地图对象的控制器将负责创建并向地图对象发送回调,以便地图对象知道它的客户想要什么。 singleclick。 getFeature是地图对象的责任,如何处理该功能的id是客户端(即控制器)的责任。

呼!

地图代码:

map.on('singleclick',function(event){
    map.forEachFeatureAtPixel(event.pixel,function(feature){
        callback(feature.getId());
    });
});

控制器代码:

...
function mapCallback(someId){
    var elem = angular.element('#info');
    if ( someId === undefined ) {
        elem.slideUp(); // Hide element
    } else {
        for (var data, ii = 0, len = vm.dataList.length; ii < len; ii++) {
            data = vm.dataList[ii];
            if ( someId === data.property ) {
                vm.currentData = data;
                $scope.$apply();
                elem.slideDown(); // Show element
                break;
            } else {
                elem.slideUp(); // Hide element
            }
        }
    }
}
...

1)地图与有关特征的数据解耦。

2)Controller控制地图选择数据时会发生什么。

3)HTML保留在Controller的相关组件的templateUrl所在的位置!