使用 Angular 1.5 创建 <td> 指令

Question

我正在尝试使 Angular 1.5 指令在 ng-repeat 中用于 table。我需要这样做的一些事情（如果我以完全错误的方式进行，请告诉我）：

1) 每当提供新结果时更新 html。最重要的是，link 函数被调用一次，结果为空，并且再也没有被调用过。所以，我的 table 是空白的。总是。
2) 在指令的 'template' 中，我引用了控制器的名称和一个类型耦合的方法。 'right' 是这样做的方法吗？

这是我的代码片段...

模块-a.view.html:

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

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

(function(){
    'use strict';
    /* global angular */// ESLINT
    angular.module('common').directive('tdResult',Directive);

    Directive.$inject = ['$compile'];

    function Directive($compile){
        return {
            restrict : 'E',
            scope : {
                result : '@',     
                ctrlName : '@'  
            },
            template: '<td>{{result.prop1}}</td>\
                        <td>{{result.prop2}}</td>\
                        <td>{{result.prop3}}</td>\
                        <td><div ng-click="ctrlName.doSomething()">Something Goes Here {{ctrlName}}</div></td>'
        };
    }
 })();

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

让我来到这里的总体背景是我有一个 OpenLayers 3 地图，显示查询的结果数据。当你点击它时，我在地图上有结果数据以交互方式显示结果数据，如下所示：http://openlayers.org/en/latest/examples/getfeatureinfo-image.html

不同的是，我使用的是 Angular 1.5。我有一个带有控制器的 ModuleA 并查看其中的地图。我有另一个 ModuleCommon，它包含一个服务，该服务处理地图对象的创建并将其交给 ModuleA.controller（或任何需要地图服务的控制器）。所以，现在，我必须为地图服务创建一个接口，该接口通常可以处理向任何想要呈现所述数据的客户端显示数据。

Answer 1

我认为这完全是个坏主意，我需要退后一步。首先，地图对象不应该负责显示数据。该地图负责处理 '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) 控制器控制地图选择其数据时发生的情况。

3) HTML 保留在它所属的 Controller 关联组件的 templateUrl 中！

使用 Angular 1.5 创建 <td> 指令

Creating <td> directive with Angular 1.5

angularjs

angularjs-directive

openlayers-3