Question

有人能告诉我为什么在ng-click上没有调用logUserIn（）函数吗？这让我疯狂了???

在login.html中有一个按钮，在loginController中使用ng-click到logUserIn（）函数，但是无法使函数运行起来????

1）app.module.js

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

2）app.route.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"}
            }
        });
    };
})();

3）index.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）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）loginctrl.js

(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');
    };
};
})();

Answer 1

您需要将logUserIn添加到控制器的范围：vm.logUserIn = logUserIn。

编辑：

在你的控制器中。您只是在名为loginCtrl的{{1}}中声明了一个局部变量，相当于只说logUserIn。现在您已经创建了该函数，您需要将其添加到控制器的范围（var logUserIn = function(){ ... }或this）。

尝试像这样声明控制器：

vm

Answer 2

我发现问题出在哪里，对我来说很奇怪?????

我的所有路径都是从/ cz-office / client / app ....

开始的

找到所有文件（控制台变量中没有错误被识别，但功能不起作用）

经过几个小时的调试后，我对同一目录中的所有文件和功能都有效 - ＆gt;放回不同的目录，......哎呀不工作！

更多调试和......

然后我改变了我的路径到客户端/应用程序.....

而且......一切正常!!!!!

奇怪的是，我不理解的是，在两种方法中，检索到的文件和之前情况下的文件只有函数不起作用???

没有从ng-click调用角度函数？

2 个答案: