在具有角度的umbraco区域模块上偶尔会发生404错误

Question

我有一个Umbraco项目，其中Area部分配置了Angular。我使用插件将Area与package.manifest一起使用，如下所示：

进入edit.controller.js，我有这个脚本：

'use strict';

angular.module("umbraco")
   .controller('Administration.AdministrationTree.EditController', function administrationEditController($scope, $routeParams, $http) {
      //set a property on the scope equal to the current route id
      $scope.id = $routeParams.id;
      $scope.url = "";
      $scope.canShow = false;

      $scope.showIframe = function () {
         if ($scope.url === "") {
            return false;
         }

         return true;
      };

      $scope.canShow = false;

      if (!$scope.id) {
         return;
      }

      $http.get('/umbraco/backoffice/administration/CustomSection/GetUrl/?node=' + $scope.id)
         .success(function (data) {

            $scope.url = JSON.parse(data);
            $scope.canShow = $scope.url;
         });
   });

当我运行项目并单击此区域中的任何节点时，我大部分时间都收到404错误，如果页面不存在。我说“大部分时间”，因为十分之一，它有效，页面显示。

但是，如果我在下面的javascript函数中放置一个断点并且我点击任何节点并在断点击中后恢复javascript，则会正确显示与节点相关的html页面。

任何人都知道为什么当我设置一个断点时，Umbraco或Angular能够100％解析页面，但是当我在这个函数中没有任何断点时却没有？

谢谢

Answer 1

我真的很讨厌回答我自己的问题，但经过两周没有答案和我身边的很多反思，我终于找到了解决这个问题的方法。

造成Umbraco和Angular之间同步问题的原因是$ http.get查询与Angular异步（我认为没有其他选择），并且在服务器响应以获取有效URL后，$ scope对象无法与Umbraco交谈以重定向到有效的URL。

在我的asp.net MVC控制器上，GetUrl函数试图获取一个有效的URL对数据库进行查询，其中我保留了一个节点结构，该结构对应于向用户显示的树。这是一个缓慢的过程，在绝大多数情况下，响应HTTP get请求所需的时间太长。

以下是我对此问题的解决方案：

'use strict';

var myCompany = myCompany || {};
myCompany.myProject = myCompany.myProject || {};

myCompany.myProject.controller = (function (parent){
   parent.urls = {};

   function loadUrls () {
      $.get('/umbraco/backoffice/administration/CustomSection/GetUrls')
         .success(function (data) {
            parent.urls = data;
         });
   };

   loadUrls();

   return parent;
})({});

angular.module("umbraco")
   .controller('Administration.AdministrationTree.EditController', function administrationEditController($scope, $routeParams, $http) {
      //set a property on the scope equal to the current route id
      $scope.id = $routeParams.id;
      $scope.url = "";
      $scope.canShow = false;

      $scope.showIframe = function () {
         if ($scope.url === "") {
            return false;
         }

         return true;
      };

      $scope.canShow = false;

      if (!$scope.id) {
         return;
      }

      var url = myCompany.myProject.controller.urls.find(function (element) {
         return element.Key == $scope.id;
      });

      if (url) $scope.url = url.Value;

      $scope.canShow = $scope.url;
   });

请注意，在这种情况下，我有一个iffe函数，它查询服务器从后台构建我所有URL的数组，然后当Angular需要重定向时，我直接从数组中搜索。

当用户进入后台部分时，iffe函数只调用一次，我认为很好，因为后面的结构很少改变。

由于我缺乏使用Angular的经验，我不确定这是一个黑客还是有效的方法，但它就像一个魅力。