Question

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

我正在通过ons按钮访问dessert.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();
                  });

Answer 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并且从未遇到过这个问题。希望这会有所帮助。

在ONSEN页面中启用Angular JS

1 个答案: