

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

[code]

    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("新規登録に失敗: ");
            });
    }]);
    
[/code]

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


CC BY-SA 3.0
2016-02-16T04:43:04.053
22151
2023-10-28T19:00:30.097
2016-02-16T09:03:12.290
8532
question
monaca angularjs baas
AngularJS においてdocument.getElementByIdにおける情報取得について


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

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2016-02-16T13:10:28.740
22178
2016-02-16T13:10:28.740
9566
22151
answer


jQueryの部分というのは

[code]

    $("#name").val()
    
[/code]

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

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

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


CC BY-SA 3.0
2016-02-16T13:29:10.593
22180
2016-02-16T13:29:10.593
14222
22151
answer