2

Onsen UI と Angular JS をいじり始めたところです。

ons-button を介して、desert.html、text/ons-template にアクセスしていますが、バインドされた ng-model itemName が正しく解釈されていません。

Angular を OnsenUI に接続する際に何かが足りないと確信しています。ここで欠けているものに関するヒントはありますか?

index.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 に答える