एक कोणीय निर्देश

में बूटस्ट्रैप-डटेरंगपिकर का उपयोग करके मुझे एक कोणीय निर्देश में बूटस्ट्रैप-डाटरंगपिकर का उपयोग करने में परेशानी हो रही है। प्रारंभ में पृष्ठ लोड करते समय यह ठीक काम करता है, लेकिन जब पेज/राज्यों को स्विच करते हैं (मैं यूई-राउटर का उपयोग कर रहा हूं) और एक डैटरंगपिकर वाले पेज पर वापस जा रहा हूं, तो प्लगइन अब और काम नहीं करेगा।एक कोणीय निर्देश

यह इस त्रुटि फेंकता है:

TypeError: $(...).daterangepicker is not a function

ऐसा लगता है कि प्लगइन ही हटा दिया गया है जब राज्यों को बदलने। किसी को भी यह पता है कि इसे कैसे ठीक किया जाए?

app.directive("daterangepicker", function() { 
    return { 
     restrict: "A", 
     scope: false, 
     link: function($scope, $element, $attr){ 

     $($element).daterangepicker({ 
      format: "DD.MM.YYYY", 
      startDate: moment().subtract('days', 1), 
      endDate: new Date(),   
      buttonClasses: ['btn-primary'], 
     }, function(from, to) { 
      $scope.date = {from: from, to: to}; 
      $scope.$apply(); // I need apply() here to use the two-way-databinding 
     }); 
     } 
    } 
    });

स्रोत

2016-04-07 Tim Van Dijck

कोई नहीं नहीं ... https://github.com/fragaria/angular-daterangepicker का उपयोग करें jQuery संस्करण –

हाँ, मैंने यह भी कोशिश की, यह jQuery संस्करण पर निर्भरता के रूप में निर्भर करता है और एक ही समस्या है जैसा कि मेरे पास है –

कोई आश्चर्य नहीं कि आपको यह त्रुटि क्यों मिलती है, अगर ऐसा है कि आप angularjs संस्करण –

मैं अंत में मेरी समस्या का हल मिल गया!

स्पष्ट होने के लिए: एक ही बग कोणीय-डाटरैंगपीकर प्लगइन के साथ हो रहा था।

यह वास्तव में कारण था क्योंकि कुछ अन्य निर्भरता ने एक अतिरिक्त jQuery लोड किया था। इस एकाधिक jQuery की वजह से लोड किया गया था और इससे बग का कारण बन गया।

स्रोत

2016-04-26 14:48:27

directive में daterangepicker आरंभ करने से पहले इस जोड़ने का प्रयास करें।

if (!jQuery().daterangepicker) { 
    return; 
} 

$($element).daterangepicker({...});

स्रोत

2016-04-20 13:40:56

का एक कार्य उदाहरण भी है, यह त्रुटि को ट्रिगर करने से रोकता है लेकिन यह अब पिकर को प्रारंभ नहीं करता है ... –

क्या आप उस ऑर्डर को सत्यापित कर सकते हैं जिसमें जेएस फाइलें आपके मास्टर एचटीएमएल में परिभाषित हैं सही हैं? –

मैं मॉड्यूल वहाँ पहले से ही कई परियोजनाओं द्वारा प्रदान की एक निर्देश है पहिया पुनर्रचना से बच जाएंगे,, https://angular-ui.github.io/bootstrap/

आयात का उपयोग करें:

angular.module('myModule', ['ui.bootstrap']);

और ऐसे ही उपयोग यह:

<!doctype html> 
<html ng-app="ui.bootstrap.demo"> 

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body> 

    <style> 
    .full button span { 
     background-color: limegreen; 
     border-radius: 32px; 
     color: black; 
    } 

    .partially button span { 
     background-color: orange; 
     border-radius: 32px; 
     color: black; 
    } 
    </style> 
    <div ng-controller="DatepickerPopupDemoCtrl"> 
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> 

    <h4>Popup</h4> 
    <div class="row"> 
     <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> 
      <span class="input-group-btn"> 

      <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 

      </span> 
     </p> 
     </div> 

     <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 
      <span class="input-group-btn"> 

      <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 

      </span> 
     </p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
     <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> 
     <select class="form-control" ng-model="format" ng-options="f for f in formats"> 
      <option></option> 
     </select> 
     </div> 
    </div> 

    <hr /> 
    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button> 
    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button> 
    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button> 
    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button> 
    </div> 
</body> 

</html>

नियंत्रक:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function($scope) { 
     $scope.today = function() { 
     $scope.dt = new Date(); 
     }; 
     $scope.today(); 

     $scope.clear = function() { 
     $scope.dt = null; 
     }; 

     $scope.inlineOptions = { 
     customClass: getDayClass, 
     minDate: new Date(), 
     showWeeks: true 
     }; 

     $scope.dateOptions = { 
     dateDisabled: disabled, 
     formatYear: 'yy', 
     maxDate: new Date(2020, 5, 22), 
     minDate: new Date(), 
     startingDay: 1 
     }; 

     // Disable weekend selection 
     function disabled(data) { 
     var date = data.date, 
      mode = data.mode; 
     return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 
     } 

     $scope.toggleMin = function() { 
     $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date(); 
     $scope.dateOptions.minDate = $scope.inlineOptions.minDate; 
     }; 

     $scope.toggleMin(); 

     $scope.open1 = function() { 
     $scope.popup1.opened = true; 
     }; 

     $scope.open2 = function() { 
     $scope.popup2.opened = true; 
     }; 

     $scope.setDate = function(year, month, day) { 
     $scope.dt = new Date(year, month, day); 
     }; 

     $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = $scope.formats[0]; 
     $scope.altInputFormats = ['M!/d!/yyyy']; 

     $scope.popup1 = { 
     opened: false 
     }; 

     $scope.popup2 = { 
     opened: false 
     }; 

     var tomorrow = new Date(); 
     tomorrow.setDate(tomorrow.getDate() + 1); 
     var afterTomorrow = new Date(); 
     afterTomorrow.setDate(tomorrow.getDate() + 1); 
     $scope.events = [{ 
     date: tomorrow, 
     status: 'full' 
     }, { 
     date: afterTomorrow, 
     status: 'partially' 
     }]; 

     function getDayClass(data) { 
     var date = data.date, 
      mode = data.mode; 
     if (mode === 'day') { 
      var dayToCheck = new Date(date).setHours(0, 0, 0, 0); 

      for (var i = 0; i < $scope.events.length; i++) { 
      var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0); 

      if (dayToCheck === currentDay) { 
       return $scope.events[i].status; 
      } 
      } 
     } 

     return ''; 
     } 
    });

plunker: http://plnkr.co/edit/LZgUAZQkNKgDrUZAVWSa?p=preview

स्रोत

2016-04-26 06:15:33 thegio

एक कोणीय निर्देश

उत्तर

संबंधित मुद्दे