Datownik kraciasty UI nie działa

Podążyłem za krokami opisanymi tutaj Getting Angular UI to work i tutaj How to integrate AngularUI to AngularJS?, ale nie można uzyskać okienka podręcznego do pop-up.Datownik kraciasty UI nie działa

Pamiętaj, że skrzypce usztywniane w obu postach w zaakceptowanej odpowiedzi nie działają.

Wszelkie sugestie? czy ten gadżet działa na ostatnich wersjach kątowych-ui?

Aktualizacja: import Moi zasobów

<link href="/assets/jquery-ui-1.10.2.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/angular-ui.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/project.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery-ui-1.10.2.custom.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-ui.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/angular-resource.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/directives.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.hotkeys.js?body=1" type="text/javascript"></script> 
<script src="/assets/module.js?body=1" type="text/javascript"></script> 
<script src="/assets/underscore-min.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script>

Deklaracja modułu:

angular.module('project', ['ngResource', 'ui.directives']);

Tag:

<input type="text" ng-model="date" ui-date/>

Źródło

2013-04-23 Tomas Romero

one brakuje odwołań zewnętrznych (404 na obu JS i CSS) . Jest to prawdopodobnie spowodowane brakującymi referencjami. Oto working example.

Należy pamiętać, że AngularUI głównie owija wtyczki jQueryUI. Więc potrzebujesz jQueryUI przed AngularUI i jQuery przed jQueryUI. I Angular samo przed AngularUI. Tylko upewnij się, że masz następujące CSSS:

jQueryUI (http://jqueryui.com/)
AngularUI (http://angular-ui.github.io/)
Twoja aplikacja

I te JS plików w następującej kolejności:

jQuery, dzięki czemu można bezpiecznie załadować wtyczkę jQuery UI s (Datapicker)
jQueryUI, więc AngualrUI mogą skorzystać z jego wtyczki (Datepicker)
kątowa, więc AngularUI mieć dostęp do kątowego ramach
AngualrUI
Twój deklaracji moduł , odnosząc się do modułu ui.directives.

Źródło

2013-04-23 14:45:39

I zostały zaktualizowane moje pytanie z moich referencji, być może jestem brudząc coś tam. –

Kopiuję/wklejałem twój przykład pracy w mojej aplikacji, ale jest to błąd, muszę mieć błędną konfigurację. –

Czy sprawdziłeś kartę sieci, aby sprawdzić, czy wszystkie zależności są załadowane? Czy nie dostajesz żadnego 404? Dlaczego masz 'jquery-ui.js? Body = 1' i' jquery-ui-1.10.2.custom.min.js? Body = 1'? –

Jako obejście, dopóki nie dostanę kątową UI pracować w moim projekcie zrobiłem następującą dyrektywę, która działa:

project.directive('datepicker', function() { 

    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     date: '=' 
    }, 
    link: function(scope, element, attrs) { 
     element.datepicker({ 
     dateFormat: 'dd-mm-yy', 
     onSelect: function(dateText, datepicker) { 
      scope.date = dateText; 
      scope.$apply(); 
     } 
     }); 
    }, 
    template: '<input type="text" class="span2" ng-model="date"/>', 
    replace: true 
    } 

});

aw HTML:

<td><datepicker date="myDomainObj.startDate"></datepicker></td> 
<td><datepicker date="myDomainObj.endDate"></datepicker></td>

Źródło

2013-04-23 17:06:54

zawierać następujące JS w celu:

jquery.js
jquery-ui.js
kątowa min.js

dodałem następujące

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>

w kodzie html

<body ng-app="myApp" ng-controller="myController"> 
// some other html code 
<input type="text" ng-model="date" mydatepicker /> 
<br/> 
{{ date }} 
//some other html code 
</body>

w js, upewnij się, że kod do pierwszej dyrektywy, a potem dodać kod sterownika, inny to spowoduje problemy.

data dyrektywa kompletacji:

var app = angular.module('myApp',[]); 
app.directive('mydatepicker', function() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelCtrl) { 
     element.datepicker({ 
      dateFormat: 'DD, d MM, yy', 
      onSelect: function (date) { 
       scope.date = date; 
       scope.$apply(); 
      } 
     }); 
    } 
    }; 
});

kod dyrektywa o których mowa z powyższych odpowiedzi.

Po tej dyrektywy, napisać regulatorowi

app.controller('myController',function($scope){ 
//controller code 
};

Źródło

2015-11-25 16:47:26

Datownik kraciasty UI nie działa

Odpowiedz

Powiązane problemy