0

Monaca + nifty mbaaSで開発しています。
ログイン画面を作ろうとしていますが、上手く動きません。
また、AngularJSとJQueryを混在できるため以下のように書きましたが、
出来ればAngularJSに統一して書きたいです。

angular.module('xxx',['onsen'])
.controller('login', ['$scope', ng-click = function() {
    var api_key = "xxxxxxxx";
    var client_key = "yyyyyyy";
    var ncmb = new NCMB(api_key, client_key);
    var user = ncmb.User();
    user.set("userName", $("#name").val())
    .set("password", $("#pass").val())
    .set("mailAddress", $("#mail").val())
    .set("phone", $("#phone"));

    user.signUpByAccount()
        .then(function($scope) {
            alert("登録に成功しました");
            console.log("新規登録に成功");
        })
        .catch(function(err) {
            alert("登録に失敗しました");
            console.log("新規登録に失敗: ");
        });
}]);

どのように書くのが正しいのでしょうか?

2 件の回答 2

0

inputタグにng-modelを使用することで各データを取得することができます。
※JS/CSSコンポーネントの追加と削除 angularjs Ver=1.5.0 追加。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
var app = angular.module("myApp", []);
app.controller("loginController", ["$scope", function($scope) {
    $scope.user = {
        name: "",
        password: "",
        mail: "",
        phone: ""
    };
    $scope.userLogin = function() {
        alert("user:" + $scope.user.name + " pass:" + $scope.user.password + " mail:" + $scope.user.mail + " phone:" + $scope.user.phone);
        // ここに処理を書く
    };
}]);
    </script>
</head>
<body ng-controller="loginController">
    Name <input type="text" name="name" ng-model="user.name"><br>
    Password <input type="password" name="password" ng-model="user.password"><br>
    Mail <input type="email" name="mail" ng-model="user.mail"><br>
    Phone <input type="tel" name="phone" ng-model="user.phone"><br>
    <input type="button" name="login" value="Login" ng-click="userLogin()">
</body>
</html>
1
  • ng-modelの代わりにIDを設定していました。ng-modelでやってみます。
    – user5886
    Commented 2016年2月16日 13:38
0

jQueryの部分というのは

$("#name").val()

などのところでしょうか?

AngularJSにはjqLiteというものが入っていますので基本的なjQueryでの操作と同じようなことが行えます。
$elementというものをインジェクトすることで$('ng-controllerを指定した要素')を取ってくることが出来ます。
ただこれを使って複雑な操作をするのはコントローラーがごちゃごちゃしてきちゃうので使うのでしたらあとで$elementを使う操作をdirectiveにうつした方がいいかと思います。
またリンク先の説明にもありますがangular.element('セレクタ')とすることでjQueryでセレクターを使って取ってくる感覚で使うことも出来ます。
jqLiteでの制限については以下のリンクを。
http://iwb.jp/angularjs-jqlite-howto/

なお単純に入力フォームから値を取ってくるだけでしたらHTMLの方にng-model="username"などとすればコントローラーのなかで$scope.usernameとなって見ることがきます。

1
  • 書き忘れましたが、AngularJSは2.0を想定するのでjqLiteは回避しようと思っています。
    – user5886
    Commented 2016年2月16日 13:37

この質問に回答するには、ログインする必要があります。