javascript - 如何从内容页Angular JS(Ionic Framework)调用函数？

Question

嗨，我是 Angular、Ionic 的新手。尝试通过实践来学习。我的 Controller 文件上有一个 Controller ，如下所示:

我有一个内容页面，所有页面都运行这个 Controller 。内容大概是这样的:

.controller('GuideCtrlx', ['$scope', '$http', function($scope, $http) {
    var city = "London";
    $http.jsonp("https://en.wikipedia.org/w/api.php?format=json&action=parse&page=" + city + "&prop=text&section=0&callback=JSON_CALLBACK").
    success(function JSON_CALLBACK(data) {
        //stuff goes here
    })
}])
<ion-view title="Cart" id="page2" style="">
    <ion-content padding="true" class="has-header">
        {{ }}
    </ion-content>
</ion-view>

我想在具有不同城市名称的每个页面上调用 Controller 函数来获取数据。尝试添加ng-init至<ion-content没有工作。我有两个问题。 1. 如何从上述内容页面向 Controller 函数传递值？ 2. 如何在得到函数结果后才显示内容？

任何帮助将不胜感激。

Answer 1

根据你的逻辑，你可以这样尝试

Controller

    .controller('GuideCtrlx', ['$scope', '$http', function($scope,   $http) {
        // var city = "London";
        $scope.getValue = function(city){

            $http.jsonp("https://en.wikipedia.org/w/api.php?format=json&action=parse&page="+city+"&prop=text&section=0&callback=JSON_CALLBACK").
            success(function JSON_CALLBACK(data) {
                $scope.values = data;

      //stuff goes here

   })
            }

View 1(这里的城市是伦敦)

<ion-view title="Cart" id="page2" style="" ng-init="getValue('London')">
  <ion-content padding="true" class="has-header">
    {{values}}
  </ion-content>
</ion-view>

View 2(这里的城市是纽约)

<ion-view title="Cart" id="page2" style="" ng-init="getValue('New York')">
  <ion-content padding="true" class="has-header">
    {{values}}
  </ion-content>
</ion-view>