Angularjs datetimepicker не работает над частичным видом html

Я пытаюсь использовать этот jQuery Plugin Date and Time Picker в моем проекте Angularjs, чтобы получить дату от пользователя в форме.Angularjs datetimepicker не работает над частичным видом html

<html> 
<head> 
    <title>Datetime picker</title> 
    <link href="bootstrap.min.css" rel="stylesheet" > 
    <link href="jquery.datetimepicker.css" rel="stylesheet"> 
</head> 
<body> 

    <div class="container"> 
     <form> 
      <input type="text" id="datetimepicker" class="form-control"> 
     </form> 
    </div> 

    <script src="jquery-3.1.1.min.js" ></script> 
    <script src="bootstrap.min.js"></script> 
    <script src="jquery.datetimepicker.full.js"></script> 

</body> 
<script type="text/javascript"> 
    $('#datetimepicker').datetimepicker(); 
</script> 
</html>

Итак, когда я нажимаю на форму, виджет datetime появляется вполне нормально. На данный момент я не использовал Angularjs.

Теперь я хочу сделать это с Angularjs и это попытка, я до сих пор сделал:

<html ng-app="myApp"> 
<head> 
    <title>Datetime picker</title> 
    <link href="bootstrap.min.css" rel="stylesheet" > 
    <link href="jquery.datetimepicker.css" rel="stylesheet"> 
</head> 
<body> 

    <div class="container" ng-view></div> 

    <script src="angular.min.js" ></script> 
    <script src="ngRoute.js" ></script> 
    <script src="app.js" ></script> 
    <script src="jquery-3.1.1.min.js" ></script> 
    <script src="bootstrap.min.js"></script> 
    <script src="jquery.datetimepicker.full.js"></script> 

</body> 
<script type="text/javascript"> 
    $('#datetimepicker').datetimepicker(); 
</script> 
</html>

вот мой app.js файл:

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

myApp.config(function($routeProvider){ 
    $routeProvider 
     .when('/datetime', { 
      templateUrl: 'admin/date.html', 
      controller: 'DateTimeController' 
     }) 
     .otherwise({ 
      redirectTo: "/" 
     }); 
}); 

myApp.controller('DateTimeController', ["$scope", function($scope){ 

}]);

по моим маршрутам, когда Я получаю /datetime в url, Date.html частично рендер; Вот код для date.html парциального:

<div ng-controller="DateTimeController"> 
    <input type="text" id="datetimepicker" class="form-control"> 
</div>

Когда я сделал это, я ожидал, что дата/время виджет появится, но это не так. Поэтому я начал искать решения. best solution I found предложил использовать угловые директивы. Согласно этому решению, я сделал следующие изменения:

Я создал пользовательскую директиву date-time и вот код в моем app.js файле:

// ... 

myApp.directive('dateTime', function() { 
    return { 
    template:'<input type="text" id="datetimepicker" class="form-control">', 
    restrict: 'E', 
    link: function (scope, element, attr) { 
     $('#datetimepicker').datetimepicker(); 
    } 
    }; 
});

и date.html парциальное Теперь выглядел следующим образом:

<div ng-controller="DateTimeController"> 
    <date-time></date-time> 
</div>

В этот момент я был уверен, что он будет работать, но это не так.

Что я делаю неправильно? Есть ли лучший способ сделать это? Спасибо за любую помощь.

источник

2016-11-17 Awa Melvine

Из того, что я помню, вы не можете использовать Angular с JQuery, я ошибаюсь? – trichetriche

@ trichetriche: это не так. – epitka

Вы можете использовать его, если вам нужно. есть угловая оболочка, называемая jqlite, и если вы используете jquery, вы должны сделать это в директиве, потому что она меняет dom –

Трудно сказать, что именно не так, потому что здесь есть несколько итераций вашего кода, и неясно, как все они со временем менялись. Сказав это, нет причин, по которым это не должно работать - он отлично работает для меня in this Plunker. Вы должны быть в состоянии взглянуть и посмотреть, что вы делаете по-другому.

var app = angular.module('plunker', ["ngRoute"]); 

app.config(function($routeProvider){ 
    $routeProvider 
     .when('/datetime', { 
      templateUrl: 'date.html', 
      controller: 'DateTimeController' 
     }) 
     .otherwise({ 
      redirectTo: "/" 
     }); 
}); 

app.directive('dateTime', function() { 
    return { 
    template:'<input type="text" id="datetimepicker" class="form-control">', 
    restrict: 'E', 
    link: function (scope, element, attr) { 
     $('#datetimepicker').datetimepicker(); 
    } 
    }; 
}); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 

app.controller('DateTimeController', function() { 
});

источник

2016-11-17 14:36:55

Я нашел решение. Это была глупая ошибка с моей стороны. В целях тестирования я продублировал поле ввода '', и поэтому у меня было два 'id' на одной странице, и именно поэтому он не работал. Я удалил один из 'id' и его теперь работает. Большое спасибо за ваш вклад. –

Angularjs datetimepicker не работает над частичным видом html

ответ

Смежные вопросы