自定义 Umbraco 仪表板中的 JQuery UI Datepicker 和 Angular JS

Question

我最近在这篇文章中借助 Sebastiaan 论坛构建了一个自定义仪表板：

http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/60887-Custom-dashboard-Umbraco-update-service

但是，我现在修改了我的代码，试图通过在两个字段中包含一个日期选择器来使界面更加用户友好，以便我们的用户可以将两个日期传递到我们的 Web 服务并返回结果。

问题是，当我尝试在后台访问我的仪表板时，我在 Firebug 中收到以下 Javascript 错误：

错误：参数“AxumUpdateService”不是函数，未定义 cb@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:17:79 xa@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:17:187 jc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:53:310 k/http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:44:274 n@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:7:72 k@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:44:139 e@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:40:139 是/http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:39:205 odhttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:158:14 u/j.success/http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:100:347 uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 uc/e/j.promise.then/i@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:79:432 uc/g/<.then href="http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:80:485" rel="nofollow" target="_blank">http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:80:485 Xc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:92:268 Xc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:90:140 Xc/this.$gethttp://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:92:429 j@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:101:78 r@http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:104:449 dd/http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js:106:90

http://localhost:60282/umbraco/lib/angular/1.1.5/angular.min.js线 63

起初我以为是我的一些 Javascript 引起了冲突，但我检查了它，代码中没有丢失分号或错误。

然后我检查了我的 package.manifest 以确保在 AngularJS 之前调用了 Jquery，因为大多数论坛都建议这样做，但是这仍然没有帮助解决这个问题。

有人知道如何规避这些问题吗？

package.manifest

{
  javascript:[
    "~/app_plugins/Dashboards/jquery-1.11.2.min.js,
    "~/app_plugins/Dashboards/css/jquery-ui.min.js",
    "~/app_plugins/Dashboards/AxumUpdateServiceJquery.js",
    "~/app_plugins/Dashboards/AxumUpdateService.controller.js",
    "~/app_plugins/Dashboards/AxumUpdateService.service.js",
  ],
  css:[
    "~/app_plugins/Dashboards/css/axumupdateservice.min.css",
    "~/app_plugins/Dashboards/css/jquery-ui.min.css"
  ]
}

AxumUpdateService.service.js

angular.module("umbraco.services").factory("AxumUpdateService", function ($http) {
    return {
        getAll: function (from, to) {
            from = from || "";
            to = to || "";
            return $http.get("/umbraco/api/Axum/GetAllGroupTours" + "?fromDate=" + from + "&toDate=" + to);
        }
    }
});

AxumUpdateService.controller.js

angular.module("umbraco")
    .controller("AxumUpdateService",
    function ($scope, $http, AxumUpdateService) {
        $scope.getAll = function () {
            $scope.load = true;
            $scope.info = "Retreiving updates";
            AxumUpdateService.getAll($scope.fromDate, $scope.toDate).success(function (data) {
                $scope.result = data;
                $scope.info = data;
                $scope.load = false;
            });
        };
    });

AxumUpdateServiceJquery.js

$(document).ready(function () {
    $(".datepicker").datepicker();
});

Answer 1

不确定这与我遇到的完全相同的错误，但对我有用的是增加 ClientDependency.config 中的 clientDependency 版本以强制它刷新缓存的 js 文件。

也许不是“正确的程序”，但它对我有用。