具有onsenui变量的数据绑定angularjs未定义
具有onsenui变量的数据绑定angularjs未定义
提问于 2015-01-28 15:14:04
我很抱歉我刚接触onsenui和angularjs，但我会问一些关于onsenui和angularjs中数据绑定的简单问题，当我在onsen ui模板中使用带有ng- $scope.name的变量模型时，返回未定义，这是我的代码
<!doctype html>
<html lang="en" ng-app="simpleKamus">
<head>
<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="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-route.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
var nameApp=angular.module('simpleKamus',['onsen']);
nameApp.controller('KamusCtrl',['$scope','$http',function ($scope,$http){
$scope.tes=function(){
alert($scope.name);
};
}]);
</script>
</head>
<body ng-controller="KamusCtrl">
<ons-tabbar>
<ons-tab page="english.html" label="English - Indonesia" icon="ion-chatbox-working" active="true"></ons-tab>
<ons-tab page="indo.html" label="Indonesia - English" icon="ion-chatbox-working"></ons-tab>
</ons-tabbar>
<ons-template id="english.html">
<ons-toolbar>
<div class="center">ENGLISH - INDONESIA</div>
</ons-toolbar>
<input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="name" style="width: 100%">
<button ng-click="tes()">tes</button>
</ons-page>
</ons-template>
</body>
</html>当我点击tes按钮时，为什么$scope.name未定义？如果我删除了所有onsen标记，只定义了标记超文本标记语言，变量$scope.name。我已经尝试了链接Two way binding, scope variable undefined的解决方案，但不能解决这个问题，我很抱歉我糟糕的英语？谢谢你
回答 2
Stack Overflow用户
发布于 2015-01-29 08:39:50
您忘记打开标记<ons-page>。您的代码无法工作，因为控制器在 in template之后无法识别，将其放在in page works中。我修复了你用这种方式修改代码的问题
<!doctype html>
<html lang="en" ng-app="simpleKamus">
<head>
<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="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-route.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
var nameApp=angular.module('simpleKamus',['onsen']);
nameApp.controller('KamusCtrl',['$scope','$http',function ($scope,$http){
$scope.tes=function(){
alert($scope.name);
};
}]);
</script>
</head>
<body>
<ons-tabbar>
<ons-tab page="english.html" label="English - Indonesia" icon="ion-chatbox-working" active="true"></ons-tab>
<ons-tab page="indo.html" label="Indonesia - English" icon="ion-chatbox-working"></ons-tab>
</ons-tabbar>
<ons-template id="english.html">
<ons-page ng-controller="KamusCtrl">
<ons-toolbar>
<div class="center">ENGLISH - INDONESIA</div>
</ons-toolbar>
<input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="name" style="width: 100%">
<button ng-click="tes()">tes</button>
</ons-page>
</ons-template>
</body>
</html>
附注：我建议您让索引页面使用标准模板，并创建一个english.html页面来放置内容。控制器也是如此。
Stack Overflow用户
发布于 2016-05-26 08:35:08
在第一次尝试中，如果使用ng-model = "$parent.name“将会工作得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28186608
复制相关文章
相似问题
腾讯云开发者
