温泉用户界面 - 数据绑定不起作用

我是新的Onsen用户界面，使用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>

来源

2017-01-08 Juan Colombia

你看到在控制台的任何错误？ –

你好Manikadan，谢谢你的评论。在控制台中我没有看到任何不好的东西。 –

替换所有“有两种"或'。

进样$scope到控制器中：

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

变化：

ng-click="clickHandler"

要：

ng-click="clickHandler()"

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

来源

2017-01-08 08:33:29 tasseKATT

非常感谢！我工作得很好！ –

非常感谢tasseKATT！你帮了我很多:)！ 1：修改为ng-click =“clickHandler（）”并在控制器中添加$ scope，使按钮正常工作并正确显示txt消息'Hello'+ $ scope.myName（myName绑定在alert中正常）。然而，我仍然无法弄清楚为什么我无法将{{myName}}绑定为我的HTML中的文本....我的意思是myName不会像以前那样更新自己，因为它只用于没有onsen的angularJS。现在，它只显示预设值（$ scope.myName =“Default”;），并且在填充输入框时不会更新。 –

@JuanColombia如果你想双向数据绑定不客气:)更改'NG-bind'为'NG-model'输入（'{{MYNAME}}'会在输入失去焦点更新）。 – tasseKATT

再次感谢您的帮助。关于文本数据与输入结合，我几乎设法解决它，以及：

<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>

每次我点击“打招呼”按钮，数据绑定会自动更新：

但是它不无需点击按钮即自动更新。

我观察到，如果我用“输入”替换“ons-input”，数据绑定会自动更新，但是我放松了输入的Onsen风格......我想将所有html元素保留为ons- if可能。

非常感谢！

来源

2017-01-08 19:21:58

温泉用户界面 - 数据绑定不起作用

回答

相关问题