AngularJS ng-repeat-jquery Datepicker不能在ng-repeat內部工作

jQuery datepicker不能在AngularJS ng-repeat塊內工作。AngularJS ng-repeat-jquery Datepicker不能在ng-repeat內部工作

不確定在ng-repeat塊內代碼生成中是否有任何錯誤。 ng-repeat之外的邏輯也是一樣。

工作代碼

 <div class="form-group"> 
      <label class="control-label col-md-4">TEST DATE</label> 
      <div class="input-group col-md-2"> 
       <input type="text" id="testDate" name="testDate" readonly="readonly" class="form-control"> 
      </div> 
     </div>

不工作密碼

 <div ng-repeat="reportType in reportTypes"> 

      <div class="form-group"> 
       <label class="control-label col-md-4">{{reportType.reportTypeLabel}}</label> 
       <div class="input-group col-md-2"> 
        <input type="text" id="{{reportType.reportTypeCodeId}}Date" readonly="readonly" 
         class="form-control"> 
       </div> 
      </div> 
     </div>

的Javascript

// Date picker dd/mm/yyyy 
$(function() { 
    $("input[id*='date']").datepicker({ 
     dateFormat : "dd/mm/yy" 
    }); 
}); 
$(function() { 
    $("input[id*='Date']").datepicker({ 
     dateFormat : "dd/mm/yy" 
    }); 
});

來源

2015-10-28 Jay

這是錯誤的方式混合角和jQuery。當你的jQuery代碼只運行一次時，ng-repeat可能會添加或刪除元素。將所有jquery包裝爲指令或者根本不使用它 - 使用angular datepicker代替。 –

創建日期選取器指令。使用jQueryLite和datepicker作爲'element'，確保清理$ scope destroy以避免內存泄漏。 –

使用

angular.module('mymodule').directive('ngOnFinishRender', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      if (scope.$last === true) { 
       $timeout(function() { 
        scope.$emit(attr.broadcastEventName ? attr.broadcastEventName : 'ngRepeatFinished'); 
       }); 
      } 
     } 
    }; 
});

在你的控制器：後NG重複結束這個指令來初始化日期選擇器

$scope.$on('ngRepeatFinished', function(){   
    $("input[id*='date']").datepicker({ 
     dateFormat : "dd/mm/yy" 
    });   
});

在您看來，該指令ng-on-finish-render添加元素與ng-repeat：

<div ng-repeat="reportType in reportTypes" ng-on-finish-render> 

     <div class="form-group"> 
      <label class="control-label col-md-4">{{reportType.reportTypeLabel}}</label> 
      <div class="input-group col-md-2"> 
       <input type="text" id="{{reportType.reportTypeCodeId}}Date" readonly="readonly" 
        class="form-control"> 
      </div> 
     </div> 
    </div>

如果您的示波器中有多個ng-repeat並且它們有不同的用途，則可以添加broadcast-event-name="myNgRepeatFinished"參數

$scope.$on('myNgRepeatFinished', function(){   
    $("input[id*='date']").datepicker({ 
     dateFormat : "dd/mm/yy" 
    });   
});

來源

2015-10-28 16:40:18 Ragnar

非常感謝，我會嘗試。 – Jay

您必須爲datepicker創建自定義指令。

觀

<div ng-app="myApp" ng-controller="myController"> 
<div ng-repeat="report in repArray"> 
    <div class="form-group"> 
     <label>{{report.values.name}}</label> 
     <input type="text" datepicker ng-model="datevalue" /> 
    </div> 
</div>

該指令

var myApp = angular.module('myApp', []); 

myApp.controller('myController', ['$scope', function ($scope) { 
    $scope.report = [ 
     { 'name': 'rep1' }, 
     { 'name': 'rep2' }, 
     { 'name': 'rep3' } 
    ] 

    $scope.repArray = Object.keys($scope.report) 
     .map(function (value, index) { 
      return { values: $scope.report[value] } 
     } 
    ); 
} ]); 


myApp.directive("datepicker", function() { 

    function link(scope, element, attrs, controller) { 
     element.datepicker({ 
      dateFormat: "dd/mm/yy" 
     }); 
    } 

    return { 
     require: 'ngModel', 
     link: link 
    }; 
});

來源

2016-09-15 16:33:22

AngularJS ng-repeat-jquery Datepicker不能在ng-repeat內部工作

回答

相關問題