当前位置: 首页 > 面试题库 >

AngularJS:ngRoute无法正常工作

姬魁
2023-03-14
问题内容

我想让这种简单的路由正常工作,并且无法弄清楚问题出在哪里。

这是HTML:

<html lang="en" ng-app="app">

     .

     .

     .

     <a href="#voip">

       <div class="col-lg-3 service">

        <img src="assets/img/voip.svg"/>

        <h4 ng-bind-html="content.home.voip_header"></h4>

        <p ng-bind-html="content.home.voip_txt"></p>

      </div>

    </a>



    <section id="view">

      <div ng-view></div>

    </section>

这是路由:

var app = angular.module('app',[
  'ngRoute',
  'ngSanitize'
]);
    app.config(['$routeProvider',function($routeProvider){
      $routeProvider
      .when('/voip',{
        templateUrl:'assets/templates/voip.html'
      });
    }]);

如果我按如下所示指定“ otherwise”,则会加载模板。我以为也许我在href属性中使用了错误的语法,但是我到处都是,看起来应该是这样。

      .otherwise({
       redirectTo:'/voip'
      })

另一件事是,如果我听$routeChangeSuccess,则触发该事件,但未加载视图。

有任何想法吗?


问题答案:

正确的原因是您使用的是angular 1.6,并且默认的哈希前缀有所更改:

由于aa077e8,用于$ location hash-bang
URL的默认哈希前缀已从空字符串('')更改为bang('!')。如果您的应用程序不使用HTML5模式或正在不支持HTML5模式的浏览器上运行,并且您尚未指定自己的哈希前缀,则客户端URL现在将包含!字首。例如,URL将变为mydomain.com/#!/a/b/c,而不是mydomain.com/#/a/b/c。

如果您实际上不希望使用哈希前缀,则可以通过向应用程序中添加配置块来恢复以前的行为:

appModule.config([[‘$ locationProvider’,function($ locationProvider){
$ locationProvider.hashPrefix(’‘);}]));
资源

因此,您有一些选择:

1.将HTML5mode设置为true

$locationProvider.html5Mode(true);

并在html中设置html标头中的基数:

<base href="/">

最后更改<a ng-href="#voip">

<a ng-href="voip">

2.使用1.6方式
更改
<a ng-href="#voip">

<a ng-href="#!voip">

3.从1.5开始恢复旧行为-手动设置哈希前缀

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);


 类似资料:
  • 问题内容: 因此,我的设置无法按我想要的方式工作。因此,每当我运行该程序时,它就会立即从0变为100。我尝试使用,任务,并尝试了,但没有任何尝试。 这是我的程序: @MadProgrammer这是我尝试做一名摆动工作人员并将每个名称写入文档并更新进度栏的尝试。该程序将达到86%左右并停止运行,永远不会创建完成的文档。该程序将创建一个空白文档。这是我首先创建的SwingWorker对象,这是两种方法

  • 问题内容: 我在JLayeredpane上有两个JPanels。其中一个显示pdf,重叠的一个具有透明背景(我使用过setOpaque(false))。现在,我可以将图形添加到透明面板中,这样看来我实际上是在注释pdf。我想要一个橡皮擦工具来删除这些注释。我尝试使用以下代码 其中path是由多条线构成的形状。现在,不是在先前的图形上绘制 透明线 ,而是绘制 黑线 。我要去哪里错了? 问题答案: 请

  • 问题内容: 这看起来有效,但无法正常工作。我希望菜单悬停时’huh’div不透明。我尝试了淡入/淡出效果,但效果很好,但只有一次很奇怪。 问题答案: 不带点使用:

  • 问题内容: 我正在编辑从tesseract ocr获得的一些电子邮件。 这是我的代码: 但是输出不正确。 输入: 输出: 但是,当我在每次替换后将结果分配给新的String时,它都能正常工作。为什么在同一字符串中连续分配不起作用? 问题答案: 您将在Javadoc中的String.replaceAll()中注意到,第一个参数是正则表达式。 句点()和管道()以及花括号()都有特殊的含义。您需要对它

  • 问题内容: 我正在编写3D绘画,但在Java中发现了问题。在代码的一部分中,它起作用了: 在另一种情况下,它不起作用: 你能告诉我如何使它工作吗?谢谢在我问之前,是的,它确实执行了那部分代码。 编辑: 哦,现在工作正常,谢谢 问题答案: 代替:

  • 问题内容: array_key_exists不适用于大型多维数组。对于前 array_key_exists(’test’,$ arr)返回’false’,但它可以与一些简单的数组一起使用。 问题答案: array_key_exists不能递归工作(正如MattiVirkkunen指出的那样)。看一下PHP手册,可以使用以下代码来执行递归搜索: