Question

我正在使用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!";

页面上不显示控件。我也检查了谷歌。但没有帮助。提前谢谢

Answer 1

也许在HTML中你需要告诉你想要使用哪个Controller？加 ng-controller到你想要使用它的“顶层”元素。在您的情况下，可能是DIV元素正好位于输入元素之上。

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

在我的应用程序中，因为我只有控制器，所以我把它放在我的BODY元素上，它适用于我。

<body ng-app ng-controller="HelloCtrl">

</body>

使用Angular.JS和onsenui时控件不可见

1 个答案: