Question

我正在学习angularjs，我正在努力理解它的一个方面。

我希望/预期的代码行为是：

用户点击巴黎链接（锚标记）
routeProvider拦截请求，将paris.html页面加载到ng-view中。
控制器中的“getCity”函数获取数据并设置范围变量，这些变量显示在london.html表达式中。

然而，当html页面加载到ng-view时，我无法弄清楚如何配置angularjs来使用'getCity'函数。我能得到的最接近的是从CityController本身调用'getCity'函数，当加载整个app（index.html）而不是仅在单击链接时，这似乎具有调用函数的不良效果。控制器将具有许多不同的功能。

我也知道你可以使用ng-click来调用控制器的功能，但我不确定如何通过路由提供程序将html页面加载到ng-view中。

任何帮助将不胜感激。请参阅下面的代码来自为学习目的而构建的小应用程序：

的index.html

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>


</head>
<body>


        <ol>

            <li><a href="#/cities/paris">Paris</a></li>

        </ol>


        <div class="content-wrapper" ng-controller="CityController">
            <div ng-view></div>
        </div>


        <script src="resources/js/app.js"></script>

        <script src="resources/js/CityController.js"></script>

</body>
</html>

app.js

var app = angular.module("mainApp", [ 'ngRoute' ]);

app.config([ '$routeProvider', function($routeProvider) {

    $routeProvider.

    when('/cities/paris', {
        templateUrl : 'resources/paris.html',
        controller : 'CityController'
    }).


    otherwise({
        redirectTo : ''

    });


} ]);

CityController.js

app.controller('CityController', function($scope, $http) {

    $scope.getCity = function() {

        $http.get('city')
        .success(function(response) {
            $scope.name = response.name;
            $scope.country = response.country;
        }).error(function() {
            //Output error to console 
        });

    };

     //$scope.getCity();

});

我不想在这里调用getCity，因为它意味着http get请求加载index.html时调用'city'端点

paris.html

This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>

Answer 1

我认为你要找的是路由器resolve选项。

解析包含一个或多个必须在路由更改之前成功解析的promise。这意味着您可以在显示视图之前等待数据可用，并简化控制器内部模型的初始化，因为初始数据是提供给控制器而不是控制器需要外出并获取数据。

检查说明和用法here

Answer 2

您可以使用ng-init = getCity（）从paris.html调用getCity（），只要将paris.html加载到ng-view中，ng-init就会调用您的函数。对于例如。

This is Paris.
<br><br><br>
 <div ng-init=getCity() >
  Name: {{name}}<br>
  Country: {{country}}
 </div>
<br><br><br>

Angularjs：路由后如何调用控制器功能

2 个答案: