将Angular.JS与onsenui一起使用时，控件不可见

Control not visible while using Angular.JS with onsenui

本文关键字：控件 JS Angular onsenui 一起      更新时间：2023-09-26

我正在使用Angular.js和onsenui制作移动应用程序。这是我的代码：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/app.js"></script>
<script>
  ons.bootstrap();
</script>
<body ng-app="myApp">
 <ons-page>
      <ons-toolbar>
        <div class="center">Login</div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item>
          <input type="text" placeholder="Email Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
        </ons-list-item>
        <ons-list-item>
          <input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
        </ons-list-item>
      </ons-list>

      <div class="content-padded">
        <ons-button modifier="large" onclick="">Save</ons-button>
      </div>
      <div class="content-padded">
        <ons-button modifier="large" onclick="">Dont have an account?</ons-button>
      </div>
</ons-page>

<div>
<input type="text" ng-model="name">
<p>Hello {{name}}</p>
</div>
</body>
</html>
 <script>
var myApp = angular.module('myApp',[]);
myApp.controller('HelloCtrl', function($scope){
  $scope.name = "Onsen UI!";
});
</script>

一切正常，除了这个：

 var myApp = angular.module('myApp',[]);
    myApp.controller('HelloCtrl', function($scope){
      $scope.name = "Onsen UI!";

控件在页面上不可见。我也查过谷歌，但没有帮助。提前感谢

也许在HTML中你需要告诉你想要使用什么控制器？添加ng控制器到要与之一起使用的"顶级"元素。在您的情况下，可能是输入元素正上方的DIV元素。

<div ng-controller="HelloCtrl">
<input type="text" ng-model="name">
<p>Hello {{name}}</p>
</div>

在我的应用程序中，由于我只有一个控制器，所以我把它放在我的身体元素上，它对我有效。

<body ng-app ng-controller="HelloCtrl">
</body>
相关文章：