2013-08-05 55 views
1

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

我在运行时修改元素后,我使用$ compile服务手动编译修改过的元素,以正确工作角度指令,但我注意到一件事情后,应用$ 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); 

    }; 
    } 

请让我知道它会错我怎么可以使用过滤器$编译服务。

回答

2

问题是你没有使用链接器函数返回的元素。为$的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中。

+0

让我清楚我的理解,意味着我应该使用$汇编元素从Flexicoulmn服务返回的元素? – Shivkumar

+0

您应该从服务中返回您编译的元素+链接,因为链接fn会返回您想要使用的实际元素。 –