如何在两个 <ons-template> 之间共享数据？使用 angularjs 和 onsen ui答案

【问题标题】：how can I share data between two <ons-template> ?use angularjs and onsen ui如何在两个 <ons-template> 之间共享数据？使用 angularjs 和 onsen ui
【发布时间】：2014-12-11 06:50:56
【问题描述】：

我是 onsen ui 和 angularjs 的新手，今天我遇到了一个问题这是我的 HTML 代码：

<ons-page ng-controller="DialogController">
  <ons-toolbar>
    <div class="center">Dialog
    {{dataShow.username}}
    </div>
  </ons-toolbar>
  <ons-list >
   <ons-list-item ng-click="show('navigator.html')" modifier="tappable">
     Navigator
   </ons-list-item>
  </ons-list>
</ons-page>

<ons-template  id="navigator.html">
  <ons-dialog style="height: 160px;" var="naviDialog" cancelable>

    <ons-navigator var="myNav">
      <ons-toolbar inline>
        <div class="center">
          Navigator  {{dataShow.username}}
        </div>
      </ons-toolbar>

      <div style="text-align: center">
        <p>
          This is a dialog with a navigator.
        </p>

        <p>
          <ons-button onclick="naviDialog.hide()">Close</ons-button>
          <ons-button onclick="myNav.pushPage('next.html')">Next</ons-button>
        </p>
      </div>
    </ons-navigator>
  </ons-dialog>        
</ons-template>

我的 javascript 看起来像这样：

    ons.bootstrap()

.controller('DialogController', function($scope) {
  $scope.dataShow = {
    username : 'huangqiang',
    age :'25'
  };

  $scope.next = function() {
    $scope.dialog.hide();
    ons.createDialog('dialog2.html').then(function(dialog) {
      dialog.show();
    });
  }

  $scope.show = function(dlg) {
    ons.createDialog(dlg).then(function(dialog) {
      dialog.show();
    });
  }
});

问题是我无法在 {{dataShow.username}} 中得到结果，有人可以帮助我吗？

【问题讨论】：

标签： javascript angularjs dialog onsen-ui

【解决方案1】：

在使用dialog 时，您可以在ons.createDialog 函数的第二个参数中传递作用域，它应该可以满足您的需要。

例如：

ons.createDialog('template_name.html',{parentScope: $scope})

【讨论】：

【解决方案2】：

您需要创建一个单独的控制器并使用服务将数据传递给控制器。

HTML sn-p

<ons-dialog style="height: 90%; width: 90%" var="naviDialog" cancelable ng-controller="newsFeedCtrl">

确保在 ons-dialog 部分而不是模板部分添加 ng-controller

JS sn-p

.service("NewsFeedSelectedData", function () {
        this.title = "";
        this.link = "";
      })
      .controller("newsFeedCtrl", ['$scope', '$sce', 'NewsFeedSelectedData', function ($scope, $sce, NewsFeedSelectedData) {
        $scope.title = NewsFeedSelectedData.title;
        $scope.link = $sce.trustAsResourceUrl(NewsFeedSelectedData.link);
      }])

【讨论】：