Onsen UI - 数据绑定不起作用答案

【问题标题】：Onsen UI - Data binding not workingOnsen UI - 数据绑定不起作用
【发布时间】：2017-01-08 06:21:08
【问题描述】：

大家早上好，

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

我不知道为什么我的数据绑定不起作用。 CSS 和 JS 文件似乎加载正常，但是当我打开 html 文件时： 1 - 当我点击它时按钮不显示通知 2 - 文本“默认”不出现，而是显示 {{myName}} 3- 填充输入填充不会更新 {{myName}}

我已按照 Onsen UI 指南 (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>

【问题讨论】：

您是否在控制台中看到任何错误？
您好 Manikadan，感谢您的评论。我在控制台中没有看到任何不好的东西。

标签： angularjs onsen-ui

【解决方案1】：

将所有“ 替换为" 或'。

将$scope 注入您的控制器：

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

变化：

ng-click="clickHandler"

收件人：

ng-click="clickHandler()"

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

【讨论】：

非常感谢 tasseKATT ！你帮了我很多:)！ 1：修改为 ng-click="clickHandler()" 并在控制器中添加 $scope 使按钮工作正常并正确显示 txt 消息 'Hello ' + $scope.myName （警报中的 myName 绑定正常）。但是，我仍然无法弄清楚为什么我不能将 {{myName}} 绑定为我的 HTML 中的文本......现在，它只显示预设值（$scope.myName = "Default";）并且在我填写输入框时不会更新。
@JuanColombia 不客气 :) 如果您想要双向数据绑定，请将输入上的 ng-bind 更改为 ng-model（{{myName}} 将在输入失去焦点时更新）。
谢谢！这很好:) 好的，我之前没有意识到它会因为输入失去焦点而起作用，我试图获得与 angularJS 完全相同的行为，其中数据绑定在输入内部输入时实时更新。现在我明白了:)，非常感谢你为我节省了很多时间！！！
@JuanColombia 没问题 :)

【解决方案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>

每次我点击“Say Hello”按钮时，数据绑定都会自行更新：

但是它不会在不点击按钮的情况下自动更新。

我观察到如果我将“ons-input”替换为“input”，数据绑定会自动更新，但我会丢失输入的 Onsen 样式...如果可能的话，我希望将所有 html 元素保留为 ons .

非常感谢！

【讨论】：