ng click 不调用函数——对角度和离子来说非常新答案

【问题标题】：ng click not calling the function --very new to angular and ionicng click 不调用函数——对角度和离子来说非常新
【发布时间】：2016-05-05 23:49:46
【问题描述】：

尝试将数据插入到 sqlite db 并且数据是静态的，我通过函数将其传递但 ng click 不起作用。因为我是新手，所以请详细回答...提前谢谢。

 //this is my module
        var db=null;
        var myApp=angular.module('starter', ['ionic','ngCordova'])

        .run(function($ionicPlatform,$cordovaSQLite) {
          $ionicPlatform.ready(function() {
            if(window.cordova && window.cordova.plugins.Keyboard) {
              // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
              // for form inputs)
              cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

              // Don't remove this line unless you know what you are doing. It stops the viewport
              // from snapping when text inputs are focused. Ionic handles this internally for
              // a much nicer keyboard experience.
              cordova.plugins.Keyboard.disableScroll(true);
            }
            if(window.StatusBar) {
              StatusBar.styleDefault();
            }
            db = $cordovaSQLite.openDB({name:"my.db",location:'default'});
            $cordovaSQLite.execute(db,"CREATE TABLE IF NOT EXISTS user(id integer primary key, username text, password text)")
          });
        })


//this is my controller

myApp.controller('SignInCtrl',['$cordovaSQLite', function($scope, $cordovaSQLite) {
  $scope.insert=function(username,password){
    alert("hii");
    var query="INSERT INTO user(username,password) VALUES(?,?)"; 
    $cordovaSQLite.execute(db.query,[username,password]).then(function(res){
      console.log("Insert ID ->" + res.insertId);
    },
    function(err){
      console.error(err);
    });
  }
   $scope.select = function(username) {
        var query = "SELECT username, password FROM user WHERE username = ?";
        $cordovaSQLite.execute(db, query, [password]).then(function(res) {
            if(res.rows.length > 0) {
                console.log("SELECTED -> " + res.rows.item(0).username + " " + res.rows.item(0).password);
            } else {
                console.log("No results found");
            }
        }, function (err) {
            console.error(err);
        });
    }
  }])

//this is my page

<ion view view-title="Sign-In" name="Login-View">
        <ion content class="padding">
          <div class="list list-inset">
            <label class="item item-input">
              <input type="text" placeholder="Username" ng-model="data.username">
            </label>
            <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="data.password"></input>
            </label>
          </div>
        </ion>
        <button class="button button-block button-positive" ng-click="login(data)">Login</button>
     </ion>
      <br>
       <a href="#/Signup" class="button button-block button-stable">Sign Up</a>
      <a href="#/ForgotPassword" class="button button-block button-stable">Forgot Password</a>
    <a href="#/orderpage" class="button button-block button-stable">Order page</a>

     <button class="button button-block button-positive" ng-click="insert('ran','badu')">insert</button>
     <button class="button button-block button-positive" ng-click="select('ran')">select</button>

//this is my index page

 <body ng-app="starter">
     <ion-header-bar class="bar-positive">
        <h1 class="title">Billing system</h1>
         <button class="button icon ion-navicon"></button>
         <button class="button icon ion-search"></button>
      </ion-header-bar>
     <!-- <ion-content > -->
     <!-- <P>I am in index</P>
     <a href="#/Login">Loginpage</a> -->

     <!--  </ion-content> -->

     <ion-nav-view class="slide-left-right"></ion-nav-view>
  </body>


//this is my route

.config(function($stateProvider,$urlRouterProvider) {
  $stateProvider
    .state('Login',{
        url:'/Login',
        templateUrl:'templates/Login.html',
       controller:'SignInCtrl'

    })
    .state('Signup',{
      url:'/Signup',
       templateUrl:'templates/Signup.html',
       controller:'SignInCtrl'
 })
.state('ForgotPassword',{
      url:'/ForgotPassword',
       templateUrl:'templates/ForgotPassword.html',
       controller:'SignInCtrl'
 })

.state('orderpage',{
      url:'/orderpage',
       templateUrl:'templates/orderpage.html',
       controller:'SignInCtrl'
 })
      $urlRouterProvider.otherwise('/Login');  

})

【问题讨论】：

标签： android angularjs ionic-framework ngcordova

【解决方案1】：

SignInCtrl 声明有误。改这行代码

myApp.controller('SignInCtrl',['$cordovaSQLite', function($scope, $cordovaSQLite)

与

myApp.controller('SignInCtrl',['$scope','$cordovaSQLite', function($scope, $cordovaSQLite)

这里的问题是你使用内联依赖注入，顺序很重要

【讨论】：

感谢在添加 $scope 后它进入了函数但它没有插入数据。收到错误“无法读取未定义的属性‘事务’”
将 $cordovaSQLite.execute(db.query,[username,password]) 更改为 $cordovaSQLite.execute(db, query,[username,password])。您应该使用“，”而不是“。”试试这是否解决了您的问题或者是拼写错误
感谢就像魅力一样。它对我很有帮助，因为我是新手。三天前我刚开始使用 ionic。请提供一些学习概念的好链接。
因为你是初学者我建议你，首先阅读角度概念。一本很棒的书（也是官方的）是 ng-book(ng-book.com)。关于 ionic 我认为官方 ionic 框架页面（ionicframework.com/docs/guide/building.html）是一个很好的起点

【解决方案2】：

查看您的代码，您的登录控制器中不存在 login() 方法尝试将登录方法添加到控制器中

myApp.controller('SignInCtrl', ['$cordovaSQLite', function ($scope, $cordovaSQLite) {
    $scope.insert = function (username, password) {
        alert("hii");
        var query = "INSERT INTO user(username,password) VALUES(?,?)";
        $cordovaSQLite.execute(db.query, [username, password]).then(function (res) {
            console.log("Insert ID ->" + res.insertId);
        },
            function (err) {
                console.error(err);
            });
    }
    $scope.select = function (username) {
        var query = "SELECT username, password FROM user WHERE username = ?";
        $cordovaSQLite.execute(db, query, [password]).then(function (res) {
            if (res.rows.length > 0) {
                console.log("SELECTED -> " + res.rows.item(0).username + " " + res.rows.item(0).password);
            } else {
                console.log("No results found");
            }
        }, function (err) {
            console.error(err);
        });
    }

    $scope.login = function(data){
        //Add Login Logic ....:)
        console.log(data)
    }
}])

【讨论】：

感谢您的回答。我只是想通过单击登录页面中的按钮来插入数据。按钮名称为 insert 和函数 insert()。