2

我刚刚开始使用 Onsen UI 和 Angular JS。

我正在通过一个 ons 按钮访问一个甜点.html、文本/ons-template，但绑定的 ng-model itemName 没有被正确解释。

我确定我在将 Angular 与 OnsenUI 连接时遗漏了一些东西。关于我在这里缺少的任何提示？

索引.html

<ons-list-item modifier="tappable">
<ons-button modifier="large--quiet" onclick="myNavigator.pushPage('dessert.html', { animation : 'slide' } )">Dessert</ons-button>
</ons-list-item>

<script type="text/ons-template" id="dessert.html">
<ons-page>
<ons-toolbar>
<div class="center">Dessert</div>
</ons-toolbar>
<ons-list-item class="assgn-list" ng-controller="itemNameCtrl" ng-model="itemName">
{{itemName}}
</ons-list-item>
</ons-page>
</script>

js/app.js

var myApp;

(function()
{
    myApp = angular.module('myApp', ['onsen.directives']);
}
)();

 myApp.controller('itemNameCtrl', function($scope)
                  {
                  $scope.itemName = "Tiramisu";
                  $scope.$apply();
                  });
4

1 回答 1

1

我使用您的代码库制作了一个Plunk，它正在工作。试试看。为了方便起见，我添加了一个后退按钮。

<script type="text/ons-template" id="dessert.html">
  <ons-page>
    <ons-toolbar><div class="center">Dessert</div></ons-toolbar>
      <ons-list-item class="assgn-list" ng-controller="itemNameCtrl"> 
        {{itemName}} 
        <input type='text' ng-model='itemName' />
      </ons-list-item>
     <ons-button modifier="large--quiet" onclick="myNavigator.popPage()">Back</ons-button>
  </ons-page>
</script>

我注意到的一件奇怪的事情是，如果<ons-button>从模板 (dessert.html) 中删除 ，则插值不起作用。老实说，我不确定为什么会这样。我ons-page没有ons-button并且从未有过这个问题。希望这可以帮助。

于 2014-08-06T22:41:36.400 回答