Question

大家早上好，

我是Onsen UI的新手，使用Angular JS v1.6.1和Onsen UI v2。

我无法弄清楚为什么我的数据绑定不起作用。 CSS和JS文件好像加载好但是当我打开html文件时：单击时，1 - 按钮不显示通知 2 - 未显示“默认”文字，而{{myName}}则显示 3-填写输入填充不会更新{{myName}}

我已按照温泉用户界面指南（https://onsen.io/v2/docs/guide/angular1/）...我不明白可能是什么问题。如果你们中的一些人可以帮我解决这个话题，我将非常感激。

祝你有个美好的一天！

塞德里克

<!doctype html>
<html lang=“en” ng-app=“my-app”>
<head>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“onsenui/css/onsenui.css”/>
<link rel=“stylesheet” href=“onsenui/css/onsen-css-components.css”/>
<script src=“js/angular.min.js”></script>
<script src=“onsenui/js/onsenui.js”></script>
<script src=“onsenui/js/angular-onsenui.js”></script>
<script>

  var module = angular.module('my-app', ['onsen']);

  module.controller('AppController', function() { 
  ons.notification.alert('Welcome !');

    $scope.myName = "Default";

    $scope.clickHandler = function(event) { ons.notification.alert('Hello ' + $scope.myName);}

    });

</script>
</head>

<body ng-controller=“AppController”>

{{myName}}

<br> <br>

<ons-input ng-bind=“myName” placeholder=“Your Name” float></ons-input>

<br> <br>

<ons-button ng-click=“clickHandler”>Say Hello</ons-button>

</body>

</html>

Answer 1

将所有“替换为"或'。

将$scope注入您的控制器：

module.controller('AppController', function($scope) { ...

变化：

ng-click="clickHandler"

要：

ng-click="clickHandler()"

演示： http://plnkr.co/edit/HomH2oTmESLrs7zSrKei?p=preview

Answer 2

再次感谢您的帮助。关于与输入绑定的文本数据，我几乎设法修复它：

<script>
var app = angular.module('myApp', ['onsen']);
app.controller('todoCtrl', function($scope) {
ons.notification.alert('welcome!');

    $scope.name = 'Default';

$scope.clickHandler = function(event) {
  ons.notification.alert('Hello ' + $scope.name);
}


});

</script>


</head>

<body>

<ons-span ng-bind='name'></ons-span>

<br>


<ons-input ng-model='name' placeholder='Your Name' float></ons-input>


<br>
<ons-button ng-click='clickHandler()'>Say Hello</ons-button>

</body>
</html>

每次我点击＆＃34; Say Hello＆＃34;按钮，数据绑定更新本身：

但是，如果不单击按钮，它不会自动更新。

我发现，如果我更换＆＃34; ons-input＆＃34;通过＆＃34;输入＆＃34;，数据绑定会自动更新，但我放弃了输入的Onsen样式...如果可能的话，我希望将所有html元素保留为ons。

非常感谢！

Onsen UI - 数据绑定无法正常工作

2 个答案: