онсэн UI - привязка данных не работает

Доброе утро всем,онсэн UI - привязка данных не работает

Я новичок в онсэн UI, используя угловые JS v1.6.1 и Onsen v2 UI.

Я не могу понять, почему привязка данных не работает. Файлы CSS и JS, похоже, загружаются нормально, но когда я открываю html-файл: 1 - кнопка не отображает уведомление при нажатии на него 2 - Текст «По умолчанию» не отображается, а вместо этого отображается {{myName}} 3 - Заполнение ввода заполняется не обновляется {{myName}}

Я следовал руководству пользователя Onsen (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

Вы видели ошибку в консоли? –

Привет, Маникадан, спасибо за ваш комментарий. Я не видел ничего плохого в консоли. –

Заменить все “ либо " или '.

Вводят $scope в контроллер:

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

Изменение:

ng-click="clickHandler"

To:

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 в сообщении). Тем не менее, я до сих пор не могу понять, почему я не могу связать {{myName}} как текст в своем HTML ... Я имею в виду, что myName не обновляет себя, как это делалось, когда я использовал angularJS только без onsen. Теперь он показывает только предустановленное значение ($ 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>

Каждый раз, когда я нажимаю на кнопку «Say Hello», привязка данных обновляет себя:

Однако это не автоматически обновляется без нажатия кнопки.

Я заметил, что если я заменил «ons-input» на «input», привязка данных обновится автоматически, но я потеряю стиль Onsen для ввода ... Я хотел бы сохранить все мои html-элементы как ons- if возможное.

спасибо!

источник

2017-01-08 19:21:58

онсэн UI - привязка данных не работает

ответ

Смежные вопросы