Question

每当我启动网站时它工作正常，但所有链接都被破坏了。它们可以工作，我可以点击它们，它会将我引导到正确的URL，但不显示与该特定页面相关的内容。但是，如果我要将该URL复制并粘贴到不同的浏览器窗口中，它会将我重定向回家，就好像该URL不存在一样...... 继承我的应用程序JS文件：

var app = angular.module("myApp", ['dotjem.routing']);

app.config(function($routeProvider, $stateProvider){
    $routeProvider.otherwise({redirectTo: '/home'});

    $stateProvider.state('home', {route: '/home', views:{"main":{template:"template/guide.html"}}});
    $stateProvider.state(['$register', '$http', function(reg, $http){
        return $http.get("api/getpages.php").success(function(data){
            for(element in data){
                reg(data[element].pagename, {route: data[element].path, view:{"main":{template:data[element].templateUrl}}});
            }
        });
    }]);
});

当我尝试在我点击之前链接的页面上刷新后点击页面时出现此错误，然后菜单栏上的所有链接都消失了：

错误：找不到'$ root'下的'mybuilds'。在错误（） at a.lookup（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:23732）在a.resolve（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:23975） at Object.J.url（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:18670）在f（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29260）在我（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29537）在链接（http://url.co.uk/angular/myblog/scripts/angular-routing.min.js:8:29694） at nodeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:6230:13）在compositeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:5640:15）在compositeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js:5643:13）

<a sref="'{{link.path}}'" class="ng-binding">

我的链接是如何工作的。

JSON示例，如果它有帮助：

[{"id":1,"displayName":"Tour","pagename":"home","templateUrl":"templates\/tourview.html","path":"\/home"}]

我也试过手动输入链接，但仍然没有喜悦。

<div jem-view="main"></div>

是我的看法。主页完美运行。

Answer 1

我很容易发现其中一件似乎不正确的事情是你使用sref，当你指向路线而不是状态时，sref意味着更容易管理状态及其URL，因为你可以链接直接对他们而不是在多个地方复制路线。

所以，而不是你做了什么，你应该说<a sref="link.pagename">（它是一个常规绑定，当我们创建静态链接时，我们使用''围绕它，就像ng-include）假设你有一个服务或什么的你存储这些链接的地方，它们只是你从服务器获得的json对象。

工作示例：http://plnkr.co/edit/M9Ey6VnJn7wHLqNdHmwh?p=preview

要查看sref的使用情况，我们可以看看它是如何在该示例中完成的：

app.service('menu', function() {
  var self = this;
  self.register = function(title, state) {
    self.items.push({
      title: title, state: state
    });
  }
  self.items = [];
});

正如我所说，你可能有一些菜单服务，在我称之为菜单的样本中，这不是最好的名字，但它在演示中用于它的目的。这是我们注册链接的地方。

请注意，我们实际上可以访问整个内部“状态”树，但这不是官方API。（它暴露在测试中）。相反，我们只是在外面管理它。这样就可以对项目进行分类等，因为我们可能不希望每个状态都在顶栏上显示。

app.config(['$stateProvider',
  function(sp) {

    sp.state('home', {
      route: '/',
      views: {
        "main": {
          template: "template/guide.html"
        }
      }
    });

    sp.state(['$register', '$http', 'menu', 
      function(register, http, menu) {
        // This is just a workaround, home is a static state, but we can't access the
        // menu service in the provider so we just register it here. There is 2 "correct"
        // aproaches to this problem in my mind:
        //  - User a menu provider which can be used along static state registration.
        //  - Just write static references in the HTML.
        //
        // What I did here was just easier for this sample.
        menu.register('HOME', 'home');

        return http.get("routes.json").success(function(data) {
          angular.forEach(data, function(state){
            // Register the "state link" with the menu service.
            // All we need here is it't title and the state name.
            menu.register(state.displayName, state.pagename);

            // Register the actual state. I would have prefered different names here
            // but thats preference.
            register(state.pagename, {
              route: state.path,
              views: { main: { template: state.templateUrl } }
            });
          });
        });
      }
    ]);
  }
]);

评论的内容不会详细说明。

app.controller('siteController', ['$scope', '$state', 'menu',
  function($scope, $state, menu) {
    //Some ugly bindup just so we can demonstrate that the latebound registration works.
    this.menu = menu;
    this.state = $state;
  }
]);

我喜欢在我的角度应用程序中拥有一个全局站点控制器，在这个例子中我们只是用它来直接公开菜单服务和状态服务，这不是一种推荐的方法，而是一种快速的演示方法。 / p>

<body ng-controller="siteController as site">
  ...
      <ul class="nav navbar-nav">
        <li ng-repeat="page in site.menu.items"
            ng-class="{ active: site.state.isActive(page.state) }">
          <a sref="page.state">{{ page.title }}</a>
        </li>
      </ul>

最后是我们如何构建菜单的示例。

DotJem AngularJS路由：错误：无法找到＆＃39; pagename＆＃39;根据＆＃39; $ root＆＃39;

1 个答案: