我如何在兩個之間共享數據 <ons-template> ？使用angularjs和onsen ui

Question

我是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}}的結果，有人可以幫助我嗎？

Answer 1

您需要創建一個單獨的控制器，並使用服務將數據傳遞到控制器。

HTML片段

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

確保在ons-dialog部分而不是template部分上添加ng-controller

JS片段

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

Answer 2

使用dialog ，可以在ons.createDialog函數的第二個參數中傳遞作用域，它應該ons.createDialog您的需要。

例如：

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