Question

我正在使用ONSEN UI构建移动应用程序。我使用angularjs作为支持JavaScript框架。

以下是我在单个页面模板中有2个视图的方法。

<ons-template id="categories.html">
    <ons-page ng-controller="directoryControl">
      <ons-toolbar>
        <div class="center">Directory Category List</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">

          <ons-row ng-click="setCurrentCategory(PostCategory.slug); menu.setMainPage('directory-page.html')">
            <ons-col>
              <div class="name">
                {{PostCategory.title}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>


<!-- when i click on any row (List Item) -->


  <ons-template id="directory-page.html">
    <ons-page ng-controller="directoryCategoryListing">
      <ons-toolbar>
        <div class="center">Directory List</div>
      </ons-toolbar>
      <p style="text-align: center" ng-show="spinner">
          <ons-icon icon="spinner" class="spinner center" size="40px" spin="true"  fixed-width="true" ></ons-icon>
      </p>
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container">
          <ons-row>
            <ons-col width="95px">
              <img src="images/location1.png" class="thumbnail">
            </ons-col>
            <ons-col>
              <div class="name">
                Some Title
              </div>

              <div class="desc">
                Some Description
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>

所以这是我的控制器看起来像：

var module = angular.module('app', ['onsen']);

module.controller('directoryControl', function($scope, $http) {
ons.ready(function() {

                $scope.spinner = true;
                $scope.CurrentCategory = null;
                //some other code in between
                $scope.setCurrentCategory = function(categoryName){
                       $scope.CurrentCategory = categoryName;
                       console.log($scope.CurrentCategory);
                }

    });
});

/* Second CONTROLLER WHERE I WANT $scope.CurrentCategory value */

module.controller('directoryCategoryListing', function($scope, $http) {
ons.ready(function() {
                console.log($scope.CurrentCategory);
    });
});

我可以在第一个控制器中获得clicked row（list item）的值。但是不能把它带到第二个。有什么方法可以做到吗？

模板结构是一种页面样式。 http://codepen.io/anon/pen/wavYzY以供参考

谢谢！（提前）

Answer 1

使用$ rootScope在controller.see codepen

之间进行通信

使用此代码：

$scope.setCurrentCategory = function(categoryName){
       $scope.CurrentCategory = categoryName;
       console.log($scope.CurrentCategory);
       $rootScope.CurrentCategory=$scope.CurrentCategory;
 }

并用以下代码替换第二个控制器代码：

 module.controller('directoryCategoryListing', function($scope, $http) {
    ons.ready(function() {
                    console.log($rootScope.CurrentCategory);//it will log 

        });
    });

在具有不同视图的angularjs中将一个控制器值发送到另一个

1 个答案: