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

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);
    });
}); 

我可以在第一个控制器中获得点击行（列表项）的值。但无法将其带到第二个。有什么办法可以做到吗？

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

谢谢！ （提前）

Answer 1

使用 $rootScope 在控制器之间进行通信。参见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 

        });
    });