1

我似乎无法弄清楚为什么orderBy过滤器不适用于 $complie 元素。

我在运行时修改元素，之后我使用 $compile 服务手动编译修改后的元素以便正确工作 angular 指令，但我注意到在应用 $compile 服务后我的过滤器订单无法正常工作。

 <table class="gridTable" id="serviceContractTable" flexicolumns="srcCustomer.ServiceContracts:500"  pagesize="10">
  <thead>
    <tr class="tableRow">
      <th sorting="ContractRefNo">Contract Ref No</th>
      <th class="rightAlign" sorting="PaymentInterval">Payment Interval</th>

      <th class="centreAlign">
        <a class="src-plus-2" style="text-transform: none;" ng-click="loadSvcContract()">&nbsp;ADD</a>
      </th>
    </tr>
  </thead>
  <tbody id="serviceContractBody">
    <tr ng-hide="contract.Deleted" ng-repeat="contract in srcCustomer.ServiceContracts | orderBy:serviceContractTable:reverseserviceContractTable" class="tableRow" ng-click="loadSvcContract(contract)">
      <td>{{contract.ContractRefNo}}</td>
      <td class="rightAlign">{{contract.PaymentInterval}}</td>
      <td class="centreAlign"><span dateformat ng-model="contract.StartDate"></span></td>

    </tr>
  </tbody>
</table>

这是我的表格元素，我在其上将指令应用为 flexicolumns，并且我注入了一项使用 $compile 的服务。

//指示

myApp.directive('flexicolumns', ['$http','InfiniteScroll', 'FlexiColumns', function (http, infiniteScroll, flexiColumns) {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {

            scope.$watch(scopeElement, function (newValue, oldValue) {
                scope.isTableLoaded = false;
                if (newValue != undefined) {
                    if (newValue.length > 0) {
                       flexiColumns.FlexiColumn(element,scope, {
                                    height: tblHeight
                       });

//服务

    myApp.factory('FlexiColumns', function ($compile) {

return {

        FlexiColumn: function (element,scope, agr) {
           // all the code here to modified element 
          // here i am cloning the element
          var newElement = element.clone(true, true);
          $compile($(newElement ).html())(scope); 

    };
    }

请让我知道哪里出了问题，我如何将过滤器与 $compile 服务一起使用。

4

1 回答 1

1

问题是您没有使用链接器功能返回的元素。$compile 的 API 是这样工作的：

var newScope = $scope.$new()
newScope.whatever = Math.random();
var linker = $compile("<div>{{5 + 5}} - {{whatever}}</div>");
var element = linker(newScope);

因此，让 FlexiColumn 返回链接器返回的 JQLite/JQuery 对象，并将该元素放入 DOM。仅编译和链接已经在 DOM 中的东西是行不通的，您必须自己将链接的元素放入 DOM 中。

于 2013-08-05T12:01:37.373 回答