如何使用 Angular UI Bootstrap 和 Laravel 5

Question

我正在使用 Angular UI Bootstrap 和我的 Laravel Framework 5。我正在使用 Rating 指令。我看到以下错误：

TypeError: Cannot read property '0' of null
    at Object.ib.functionCall (angular.js:12405)
    at n.$get.n.$digest (angular.js:14300)
    at n.$get.n.$apply (angular.js:14571)
    at eg.$$debounceViewValueCommit (angular.js:23391)
    at eg.$setViewValue (angular.js:23363)
    at HTMLInputElement.l (angular.js:19784)
    at HTMLInputElement.m.event.dispatch (jquery.js:4670)
    at HTMLInputElement.m.event.add.r.handle (jquery.js:4338)(anonymous function) @ angular.js:11655$get @ angular.js:8596$get.n.$digest @ angular.js:14326$get.n.$apply @ angular.js:14571eg.$$debounceViewValueCommit @ angular.js:23391eg.$setViewValue @ angular.js:23363l @ angular.js:19784m.event.dispatch @ jquery.js:4670m.event.add.r.handle @ jquery.js:4338
angular.js:11655 Error: [$compile:tplrt] http://errors.angularjs.org/1.3.15/$compile/tplrt?p0=datepickerPopupWrap&p1=template%2Fdatepicker%2Fpopup.html
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:65:275
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:113
    at n.$get.n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15)
    at n.$get.n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:106)
    at n.$get.n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293)
    at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:240)
    at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:85:342)
    at XMLHttpRequest.F.onload (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:86:367)

我认为出现此错误是因为模板未正确加载。我已将 "template folder" 放入根目录。我也尝试放入 "public" 文件夹。但还是一样的问题 angular 站点的实际错误是

Template for directive 'datepickerPopupWrap' must have exactly one root element. template/datepicker/popup.html Please answer i am stuck. Thanks in advance

Answer 1

在 public/css 文件夹中添加 Angular UI bootstrap 的 css 个文件，在 public/js 中添加 javascript 个文件。然后在你的代码库中当你需要加载 Angular 的文件时输入：

<link href="{{asset('css/your-angular-ui.css')}}" rel="stylesheet">

和

<script type="text/javascript" src="{{asset('js/your-angular-ui.js')}}"></script>

如果它不工作，那不是 Laravel 5 的问题。 100% 确定。

Answer 2

如果您使用的是 "ui-bootstrap-tpls.min.js"，则不必包含模板文件夹。模板在 JS 文件中内联编写。

如何使用 Angular UI Bootstrap 和 Laravel 5

How to use Angular UI Bootstrap with Laravel 5

angular-ui-bootstrap

laravel-5