2016-05-24 9 views
-1

誰かがng-clickでlogUserIn()関数が呼び出されない理由を教えてもらえますか? これは私を狂ってしまう?角度関数はng-clickから呼び出されませんか?

login.htmlには、loginControllerのng-clickとlogUserIn()関数のボタンがありますが、アクションでその関数を取得することはできません。

1)

(function() { 
    'use strict'; 
    angular 
     .module('czo',['ui.router']) 
})(); 

2)app.route.js app.module.js

(function() { 
    'use strict'; 
    angular 
     .module('czo') 
     .config(config); 

function config($stateProvider, $urlRouterProvider){ 
    // States 
    $stateProvider 
     .state('index', { 
      url:'', 
      views : { 
       "bodyView": { templateUrl: "/cz-office/client/app/components/auth/login.html"}, 
       "footerView" : { templateUrl: "/cz-office/client/app/common/templates/footer.html"} 
      } 
     }); 
    }; 
})(); 

<!DOCTYPE html> 
<html ng-app="czo"> 
<head> 
    <title>Cool-Zawadi Back Office Application</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <base href="http://www.cool-zawadi.com/cz-office/"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content="The cool-zawadi Back Office application"> 
    <meta name="author" content="Rudi Werner"> 
    <!-- <link rel="icon" href="../../favicon.ico"> --> 
    <!-- Load jquery --> 
    <script src="/cz-office/client/app/assets/libs/jquery/jquery-2.2.4.min.js">  </script> 
    <!-- Load angular --> 
    <!-- <script src="/cz-office/client/app/assets/libs/angular/angular.min.js"></script> --> 
    <!- In development we use the non minified version to have readable error messages --> 
    <!- Change to angular.min.js in productuon --> 
    <script src="/cz-office/client/app/assets/libs/angular/angular.js"></script> 
    <script src="/cz-office/client/app/assets/libs/angular/ui-router/ui-router.js"></script> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="/cz-office/client/app/assets/css/czo.css"> 

<!-- Load personal scripts --> 
<script src="/cz-office/client/app/app.module.js"></script> 
<script src="/cz-office/client/app/app.routes.js"></script> 
<script src="/cz-office/client/app/components/auth/loginctrl.js"></script> 

</head> 
{{ 2 +2 }} 
<header> 
    <div ui-view="headerView"></div> 
</header> 
<body> 
    <div ui-view="bodyView"></div> 
</body> 
<footer> 
    <div ui-view="footerView"></div> 
</footer> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 

</html> 

4)ルートディレクトリ3)のindex.html )login.html

<div ng-controller="loginCtrl as vm"> 
<div class="col-md-6 col-md-offset-3"> 
    <h2>Login</h2> 
    {{3+3}} 
    {{vm.test}} 
    <label for="username">E-mail</label> 
    <input type="text" name="username" id="username" ng-model="vm.username" required /> 
    <label for="password">Paswoord</label> 
    <input type="password" name="password" id="password" ng-model="vm.password" required /> 
    <button class="btn btn-primary" ng-click="vm.logUserIn()">Login</button> 
    </div> 
</div> 

5)あなたは、コントローラのスコープにlogUserInを追加する必要が

(function() { 
'use strict'; 
angular 
    .module('czo') 
    .controller('loginCtrl',loginCtrl); 
function loginCtrl(){ 
    //variabelse 
    var vm = this; 
    vm.logUserIn = logUserIn; 
    vm.test = 'DIT IS EEN TEST'; 
    console.log('Voor Functie'); 
    // functions 
    function logUserIn(){ 
     console.log('in functie'); 
    }; 
}; 
})(); 
+1

あなたは関数logUserIn()をvm.logUserIn = funcion()に変更することができますか:loginctrl.jsで – bmartin

+0

私はこれを既に試しましたが、同じ結果です! –

+0

残りのloginctrlは動作していますか? – bmartin

答えて

2

loginctrl.js:vm.logUserIn = logUserInを。

EDIT:あなたのコントローラで

loginCtrllogUserInというローカル変数を宣言するだけです。これはvar logUserIn = function(){ ... }と同じです。関数を作成したら、コントローラのスコープ(thisまたはvm)に追加する必要があります。

は、このようなコントローラを宣言してみてください。問題があった場所

angular.module('czo').controller('loginCtrl', function($scope) { 
    //variabelse 
    $scope.logUserIn = logUserIn; 
    $scope.test = 'DIT IS EEN TEST'; 
    console.log('Voor Functie'); 
    $scope.logUserIn = logUserIn; 
    // functions 
    function logUserIn() { 
    console.log('in functie'); 
    } 
}); 
+0

littel bit more info pleaseをお願いしますか?どこにこれを置く必要がありますか? –

+0

私のコードを変更するだけですが、まだ動作していません!上記のコードの変更を参照してください! –

0

は、私が見つけたが、それは私には非常に奇妙である?????後

すべての私のパスは

.... CZ-オフィス/クライアント/アプリ/で開始し、(コンソールvariabelesにエラーが認識されていないが、機能が働いていなかった)すべてのファイル

私は同じディレクトリ内のすべてのファイルを処理していましたが、機能は動作していました - >別のディレクトリに戻って...うまく動作しません!

いくつかのより多くのデバッグと...

それから私は

そして...すべてが動作している.....クライアント/アプリに自分のパスを変更!!!!!

奇妙なことと私が理解していないことは、両方の方法でファイルが取得され、以前の状況では機能が動作しないということですか?

関連する問題