Question

我很抱歉我是onsenui和angularjs的新手，但是我会问关于onsenui和angularjs中数据绑定的简单问题，当我在onsen ui模板中使用变量$ scope.name和ng-model时返回UNDEFINE，这是我的代码

<!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是UNDEFINE？如果我删除所有onsen的标签，只标记HTML，变量$ scope.name被定义。我曾尝试过链接Two way binding, scope variable undefined中的解决方案，但无法解决这个问题，对不起我的英语不好？谢谢你

Answer 1

您忘记打开标记<ons-page>。您的代码无法正常工作，因为 ons-template 后无法识别控制器，将其置于 ons-page 中。我修复了以这种方式修改代码的问题

＆＃13;

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

＆＃13;

P.S。我建议你让索引页面带有标准模板，然后创建一个 english.html 页面放置内容。对于控制器也一样。

Answer 2

在第一次尝试中，如果您使用ng-model =＆＃34; $ parent.name＆＃34;会很好。

数据绑定angularjs与onsen ui变量UNDEFINED

2 个答案: