从 JSON 对象的下拉数组中选择后，$routeProvider 不路由

Question

我的第一条路线（在完成一些教程之后）有 2 个问题。我正在尝试将部分插入到 index.html 页面中的 ng-view 标记中。首先， $routeProvider 有点工作，但唯一能做任何事情的行是 .otherwise() 表达式。其次，从 ng-dropdown 选择更改页面的控制器代码会更改 URL，但不会更改为新的显示页面。我必须手动单击重新加载箭头才能更改显示。

我的路由应用配置代码是：

residenceApp.config(['$translateProvider', '$translatePartialLoaderProvider', '$routeProvider', '$locationProvider',
function ( $translateProvider, $translatePartialLoaderProvider, $routeProvider, $locationProvider ) {
  $locationProvider.html5Mode(true);
  $routeProvider.when("/index", { templateUrl: "partials/home.html" });
  $routeProvider.when("/partials/postApartment4Rent", { templateUrl: "partials/postApartment4Rent.html" });
  $routeProvider.otherwise({ templateUrl: "partials/home.html" });

我可以通过 .otherwise() 表达式访问任何我想要的部分页面，但其他部分无效。显示 partials/postApartment4Rent.html 的 URL，但显示没有改变。我必须手动单击重新加载箭头才能获取新页面。

部分页面具有如下锚表达式。没有 .html，我得到 404 文件未找到。这些就像普通的锚一样，没有路由。

<a href = "postApartment4Rent.html">Rent-link</a>
<a href = "index.html">Home</a>

我正在使用 angular-dropdowns，它在单击其按钮时显示一个下拉菜单。用户从下拉列表中选择并创建一个 JSON 对象，其中包含添加到基本 URL 的路径。控制器在下方。

residenceApp.controller('PostButtonController', ['$translate', '$scope', 'changePostDdFactory', '$location', 
  function ( $translate, $scope, ddSelections, $location ){
  //get the dropdown array from a factory & display it - it works
  $scope.$watch('ddMenuSelected', function( newVal ) {
    if (newVal && newVal.text) {
      $scope.newPage = "'/" + newVal.val + "'";
      alert('newPage is: ' + $scope.newPage ); //newPage is: '/postApartment4Rent'
      $location.path($scope.newPage); //URL changes, but no new page unless Reload
    }
  }, true);
}]);

我在 HTML 头中有以下 HTML5 基础。

<base href="http://localhost/angular-oPost/app/">

我的 index.html 的 HTML 还包含以下锚点，位于下拉按钮的 div 上方。它的唯一目的是成为 $routeProvider 的登陆点。它不会/不应显示为链接。

<a href="/index"></a>

index.html 的其余部分是一堆包含参数、输入或 ng-dropdowns 按钮的 div。如果有帮助，我会很高兴发布一些，但这似乎很正常。

Answer 1

第一个仅路由 .otherwise() 表达式的问题通过将第一个 .when() 表达式更改为解决了

.when("/", { templateUrl: "partials/home.html", controller: "LanguageChoiceController" } )

当用户从下拉列表中选择时，显示新 URL 但不加载页面的第二个问题已通过多处更改得到解决。用户单击下拉数组中的 JSON 对象超出了 $digest 循环。教程和书籍都没有讲这个案例，所以做了很多实验。下拉控制器中的新代码变为，如下所示，以识别并执行点击：

$scope.$watch('ddMenuSelected', function( newVal ) {
  if (newVal && newVal.text) {
    $scope.newPage = $timeout( function(){
    //fire a click - via code from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
      function fireClick(node){
      if ( document.createEvent ) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
        } else if( document.createEventObject ) {
        node.fireEvent('onclick') ; 
        } else if (typeof node.onclick == 'function' ) {
            node.onclick(); 
        }
      }
      var theNode = document.getElementById( newVal.val );
    }
    fireClick(theNode);
  }, 10 )
}, true); //end of $watch

我用下面的代码尝试了另一种“更简单”的方法，但没有任何影响

$scope.newPage=function()$timeout(function(){{angular.element(document.getElementById( newVal.val )).triggerHandler('click');}, 10);};

路由器代码（angularjs 和 angular-route 都使用 1.3.2）很简单，如下：

        .when("/partials/postApartment4Rent", { templateUrl: "partials/postApartment4Rent.html", 
        controller: "LanguageChoiceController" } )

anchor 语句如下。当放置在 index.html 或部分 html 片段之一中时，它可以工作。我把它放在 partials/home.html 片段中

<a href="#/partials/postApartment4Rent" id="postApartment4Rent"></a>

这很奇怪，因为它需要“#/”，即使我在路由器配置语句中指定了 HTML5。但是，除非“#/”在 href 的开头，否则它不会路由。

总而言之，它会路由，但没有获得 Good Housekeeping 奖，因为某些 URL 很乱，而不是 HTML5。但是，它获得了艺术与工艺奖，因为它会路由，并且即使浏览器显示奇怪/非 HTML5 URL，向后和向前浏览器箭头仍然有效。