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

时间:2018-02-23 17:02:03

标签: angularjs umbraco area

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

enter image description here

进入edit.controller.js,我有这个脚本:

const {foo: f, bar: b} = require('module');
console.log(`${f} ${b}`); // foo bar

当我运行项目并单击此区域中的任何节点时,我大部分时间都会收到404错误,例如页面不存在。我说"大部分时间"因为十分之一,它可以工作并显示页面。

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

任何人都知道为什么当我设置一个断点时,Umbraco或Angular能够在100%的时间内解析页面,但是当我在这个函数中没有断点时不能解决这个问题吗?

由于

1 个答案:

答案 0 :(得分:0)

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

造成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的经验,我不确定这是一个黑客还是有效的方法,但它的作用就像一个魅力。