Question

我有一个用户输入的搜索页面：

<ons-navigator title="WELCOME" >
    <ons-page class="center">
        <h1>PICK SOMETHING</h1>
        <ons-search-input ng-model="searchText"
                          placeholder="Search">
        </ons-search-input>
        <br />
        <ons-button type="large" ng-click="FindResult($scope);">
            Find how I get there
        </ons-button>


    </ons-page>
</ons-navigator>

和page2.html有：

<ons-page class="center">
<h1>{{searchText}}</h1>

{{searchText}}保持为空，就好像它没有查看同一个控制器一样。

我应该如何处理跨页数据绑定？

Answer 1

您是否已将控制器分配给page2.html，并在html中使用ng-controller标签或使用js文件中的配置？

您可以在此处的文档中阅读Angular控制器：https://docs.angularjs.org/guide/controller

Answer 2

您需要有一个控制器，您需要将输入绑定到对象而不是原始变量。

所以而不是

ng-model="searchText"

使用

ng-model="search.text"

确保全局控制器是模型的所有者。

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

app.controller('AppController', function($scope){
  $scope.search = {
    text: ""
  };
  $scope.FindResult = function(){
    $scope.ons.navigator.pushPage('page2.html', {title: 'Page 2'});
  }
});

这里我将控制器设置为body标签，以便第一页和page2.html可以看到控制器。

<body ng-controller="AppController">
  <ons-navigator title="WELCOME" >
    <ons-page class="center">
      <h1>PICK SOMETHING</h1>
      <ons-search-input ng-model="search.text"
                        placeholder="Search">
      </ons-search-input>
      <br />
      <ons-button type="large" ng-click="FindResult();">
          Find how I get there
      </ons-button>


  </ons-page>
</ons-navigator>

以下是plunker： http://plnkr.co/edit/RVqjRh?p=preview

如何使用onsen ui加载其他页面时使用angularjs模板

2 个答案: