使用Angular創建指令1.5

我正在嘗試在ng-repeat內爲table創建一個Angular 1.5指令。有幾件事我需要這樣做（如果我以完全錯誤的方式進行，請告訴我）：使用Angular創建指令1.5

1）每當提供新結果時更新html。最重要的是，鏈接函數被調用一次，結果爲空，並且不再被調用。所以，我的桌子是空白的。總是。
2）在指令的'模板'中，我引用了控制器的名稱和類型耦合的方法。是「正確」的方式來做到這一點？

這裏是我的代碼片段...

模塊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>' 
     }; 
    } 
})();

看完一個數字後對StackOverflow的相關問題，以及重新審查Angular的指令文檔，我無法弄清楚如何做我想做的事情。

讓我在這裏的整體環境是，我有一個OpenLayers 3地圖，顯示來自查詢的結果數據。我在地圖上顯示結果數據，當你點擊它時，交互地顯示結果數據，如下所示：http://openlayers.org/en/latest/examples/getfeatureinfo-image.html

但是，不同的是，我使用的是Angular 1.5。我有一個帶有控制器和視圖的ModuleA，用於放置地圖。我有另一個ModuleCommon，它包含處理地圖對象創建的服務，並將其交給ModuleA.controller（或任何想要地圖服務的控制器）。所以，現在，我必須爲地圖服務創建一個接口，它可以一般地處理向想要呈現所述數據的任何客戶端顯示數據。

來源

2016-10-10 westandy

您在指令元素內部插入的內容是''這是無效的。說實話，如果你有一個已知數量的屬性，我甚至沒有看到爲這個 – charlietfl

創建一個指令模板也有任何好處，對於2範圍內的綁定，你需要使用''=''而不是''@''和該手錶將自動 – charlietfl

因此，這原本只是一個NG重複的HTML，一切都很好。但後來我意識到我需要這個片段s在別的地方，但不是重複。所以，我想，讓我們把這個指令。但也許我應該重複這個代碼？不知道現在最好的選擇是什麼。 – westandy

我認爲這是一個壞主意，我需要退後一步。首先，地圖對象不應該負責顯示數據。該地圖負責處理'singleclick'事件併爲我提供一個功能。因此，我決定通過地圖服務實例化地圖對象的控制器將負責創建地圖對象並將回調發送到地圖對象，以便地圖對象知道它在客戶端上的需求。 getFeature是地圖對象的責任，如何處理該特徵的id是客戶端（即控制器）的責任。

Whe！

地圖代碼：

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保留在它所屬的控制器關聯組件的templateUrl中！

來源

2016-10-11 22:05:31 westandy

使用Angular創建​​指令1.5

回答

相關問題

使用Angular創建指令1.5