使用dynamicaly納克我的自定義指令中的指令

我試圖創建一個自定義表元素這樣的規定：使用dynamicaly納克我的自定義指令中的指令

<datatable items='tableItems' columns='columnsConfig' />

這裏tableItems'是我的項目的排列和「columnsConfig」是列渲染配置，類似於：

$scope.tableItems = [...]; 
$scope.columnsConfig = [ 
     { 
      name: 'check', 
      with: '20px', 
      renderer: function (rowItem, cellValue) { 
       return '<input ng-click="clickHandler()" type="checkbox"/>'; 
      } 
     }, 

     {name: "person.fullName", text: "Name", visible: true, width: '150px'}, 

     { 
      name: "person.age", 
      text: "Age", 
      renderer: function(rowItem, cellValue) { 
       return cellValue + ' years old'; 
      } 
     } 
];

內部渲染器函數我可以指定一些額外的數據處理或模板。

在我的指令模板，我有這樣的：

  <tbody> 
      <tr ng-repeat="item in items"> 
       <td ng-repeat="column in columns" 
        ng-show="column.visible" 
        ng-bind-html-unsafe="getCellValue(item, $index)"> 
       </td> 
      </tr> 
     </tbody>

其中內「getCellValue」功能調用我我的渲染功能。這裏是指令代碼：

angular.module('components', []) 
    .directive('datatable', function() { 
     return { 
      restrict: 'E', 
      templateUrl: '../pages/component/datatable.html', 

      scope: { 
       items: "=", 
       columns: "="    
      }, 

      controller: function ($scope, $element) { 

       $scope.getCellValue = function (item, columnIndex) { 
        var column = $scope.columns[columnIndex]; 

        // return render function result if it has been defined 
        if (column.renderer) { 
         return column.renderer(item, getItemValueByColumnName(item, column.name)); 
        } 

        // return item value by column 
        return getItemValueByColumnName(item, column.name); 
       }; 
      } 
     } 
    });

所有工作正常，除了ng -...指令。我想我必須通過$ compile或其他方式對'渲染器'函數結果進行一些額外的處理，但是我無法弄清楚如何實現這一點。所以問題是如何讓ng指令在我通過渲染函數指定它們時工作？

謝謝。

來源

2013-03-25 user2207999

一些調查後，我發現下一個解決方案：

//after all DOM manipulations we should recompile parts that has been modified 
setTimeout(function() { 
    applyAfterRenderDOMChanges(); 
}, 0); 

var applyAfterRenderDOMChanges = function() { 
    var cells = $('td', element).children(); 
    $compile(cells)(scope); 
    scope.$apply(); 
};

我對這個孤子的效率有些顧慮，但它工作得很好至今。

來源

2013-03-28 15:10:32 user2207999

使用dynamicaly納克我的自定義指令中的指令

回答

相關問題