如何在Laravel中包含Angular Bootstrap datepicker

时间:2015-07-30 02:48:17

标签: angularjs twitter-bootstrap laravel

我的代码中存在问题,因为在我的表单中有2个带有datepicker的文本框。在我以前的项目中它可以工作,它是使用CodeIgniter创建的,现在我使用Laravel开发我的项目。我不知道我的错误在哪里。我仍然是使用Laravel和Angular的新手。

这是我得到的错误:

"NetworkError: 404 Not Found - http://localhost:8000/projects/template/datepicker/datepicker.html"
datepicker.html
"NetworkError: 404 Not Found - http://localhost:8000/projects/template/datepicker/popup.html"
popup.html
Error: [$compile:tpload] http://errors.angularjs.org/1.4.3/$compile/tpload?p0=template%2Fdatepicker%2Fdatepicker.html&p1=404&p2=Not%20Found
J/<@http://localhost:8000/assets/bower_components/angular/angular.min.js:6:416
e/<@http://localhost:8000/assets/bower_components/angular/angular.min.js:146:48
f/<@http://localhost:8000/assets/bower_components/angular/angular.min.js:120:182
jf/this.$get</n.prototype.$eval@http://localhost:8000/assets/bower_components/angular/angular.min.js:134:489
jf/this.$get</n.prototype.$digest@http://localhost:8000/assets/bower_components/angular/angular.min.js:132:1
jf/this.$get</n.prototype.$apply@http://localhost:8000/assets/bower_components/angular/angular.min.js:135:267
l@http://localhost:8000/assets/bower_components/angular/angular.min.js:87:150
F@http://localhost:8000/assets/bower_components/angular/angular.min.js:91:187
Sf/</K.onload@http://localhost:8000/assets/bower_components/angular/angular.min.js:92:220

这是我的一些代码:

在我的js中:

var projectApp = angular.module('flaxApp', ['ui.bootstrap'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<#');
    $interpolateProvider.endSymbol('#>');
});

projectApp.controller('ProjectController', function($scope, $http) {

        var project = this;

        /** DATEPICKER OPTIONS **/
        $scope.today = function() {
            project.dt = '';
        };

        $scope.today();

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

            $scope.toggleMin();

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

        $scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();

            $scope.opened = true;
        };

    });

    projectApp.directive('csDateToIso', function () {

        var linkFunction = function (scope, element, attrs, ngModelCtrl) {

            ngModelCtrl.$parsers.push(function (datepickerValue) {
                return moment(datepickerValue).format('YYYY-MM-DD');
            });
        };

        return {
            restrict: 'A',
            require: 'ngModel',
            link: linkFunction
        };
    });

这是我的日期选择表格:

<div ng-app="flaxApp">
    <div ng-controller="ProjectController as ProjectCtrl">

    ...

    <div class="form-group">
        <span class="text-danger">*</span>
        {!! Form::label('date_started', 'Starting Date: ') !!}
        <div class="input-group">
            <input type="text" class="form-control" datepicker-popup="yyyy-MM-dd" cs-date-to-iso ng-model="ProjectCtrl.dt" is-open="opened" min-date="minDate" placeholder="YYYY-MM-DD" />
            <div class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </div>
        </div>
    </div>

    ...

    </div>
</div>

你能帮我解决这个问题吗?你能解释一下我为什么会遇到这些错误吗? 好的,谢谢。

1 个答案:

答案 0 :(得分:0)

好的我设法解决了它我错过了1个文件要包含。这是ui-bootstrap-tpls.min.js