Question

我正在尝试构建我的第一个AngularJS单页面应用程序。我复制了下面的部分代码并对其进行了修改。我有一个菜单栏，它调用我添加到mainController的Navigate方法。

当我单击菜单按钮时，Navigate中会显示预期的警报消息，但$ routeProvider函数中的警报消息仅在应用程序启动时触发，并且永远不会再次触发。我找不到一个很好的解释，但是逻辑说当在Navigate中设置一个新的$ location.path时，$ routeProvider函数应该触发。那是错的吗？这应该如何连线？我的嵌套单页控制器是否导致菜单命令失败？

另外，最后是否应该有两个分号，或者其中一个分号是否位于app.config部分之后？

    var app = angular.module('myApp', ['ngRoute']);

    app.config(['$routeProvider', function ($routeProvider)
    {
        alert("$routeProvider " + $routeProvider.path);
        $routeProvider
          .when('/', {
                templateUrl: 'App/Views/Home.html',
              controller: 'homeController'
          })
          .when('/about', {
              templateUrl: 'App/Views/About.html',
              controller: 'aboutController'
          })
          .otherwise({
              redirectTo: '/'
          });
    }])

    app.controller('mainController', function ($scope)
    {
        $scope.Title = "Default Title";
        $scope.Message = "Default Message";

        $scope.Navigate = function (myPath)
        {
            alert("Navigate " + myPath);
            $location.path(myPath);
        };
    });;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul class="MenuBar">
        <li class="MenuButton FloatLeft" ng-click="Navigate('/home');">Home</li>
        <li class="MenuButton FloatLeft" ng-click="Navigate('/about');">About</li>
        <li class="MenuButton FloatLeft" ng-click="Navigate('/about');">Log In</li>
    </ul>

Answer 1

每当$routeProvider函数运行时，您都会尝试运行警报，但这种方式并不常用。 $routeProvider函数只是告诉Angular“每当位置路径发生变化时，请参考此JSON对象以了解下一步该做什么。”然后，您的代码将一些JSON属性提供给Angular，例如templateUrl和controller。您的警报功能只会运行一次，因为$routeProvider只是用于配置Angular路由的设置代码。

要在转到另一个“页面”后运行代码，只需将代码添加到控制器。

代码示例：

app.controller('homeController', function($scope, $http) {
    alert("I'm running the homeController() function now");
});

另外，我注意到你没有将$location注入你的控制器。如果没有这个，$location将只是一个未定义的对象。像这样更改控制器定义：

app.controller('mainController', function ($scope, $location)
{
    $scope.Title = "Default Title";
    $scope.Message = "Default Message";

    $scope.Navigate = function (myPath)
    {
        alert("Navigate " + myPath);
        $location.path(myPath);
    };
});

请记住，任何以$美元符号（$timeout，$http，$routeProvider等）开头的Angular对象都必须注入您的控制器。

Answer 2

您要显示的代码存在一些问题。没有足够的细节可以确定，但这里有什么错误。

<强>首先

模块的config块只会在开始时执行一次。您没有在配置中看到alert超出一次，因为它只在您的模块引导期间调用过一次。

<强>第二

您需要注入控制器所依赖的服务。

app.controller('mainController', function ($scope) { });

请注意，您在此处错过了$location服务。

app.controller('mainController', function ($scope, $location) { });

<强>第三

我们无法在您的代码中看到一些缺失的内容，以帮助您解决问题。您未向我们展示mainController实际上是如何与任何事物联系起来的。如何将myPath发送到控制器上的Navigation功能等

Answer 3

我找到了一个我没有使用的嵌套控制器。当我拿出那部分菜单的时候。我说部分是因为在某些链接而不是调用Navigate函数我设置window.location。这似乎触发了$ routeProvider并且视图改变了它应该如此。当我如下所示更改导航功能时，它可以正常工作。我认为在Navigate函数中设置$ location.path（）应该做同样的事情，但它对我不起作用。

＆＃13;

$scope.Navigate = function (myPath)
{
    alert("Navigate " + myPath);
    //$location.path(myPath);
    window.location = '#' + myPath;
};

＆＃13;

为什么$ location.path不会触发$ routeProvider函数？

3 个答案: