角度函数未从 ng-click 调用

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

在登录中.html有一个带有 ng-click 的按钮，用于登录控制器中的 logUserIn（）函数，但无法在操作中获取该函数????

1）应用模块.js

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

2）应用路线.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）索引.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）登录.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）登录控制.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');
    };
};
})();

您需要

将 logUserIn 添加到控制器的作用域：vm.logUserIn = logUserIn 。

编辑：

在您的控制器中。你只是在loginCtrl中声明了一个叫做 logUserIn 的局部变量，相当于只是说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');
  }
});

我找到了问题所在，这对我来说很奇怪?????

我所有的道路都是从/cz-office/client/app 开始的。

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

经过几个小时的调试，我绑定了同一目录中的所有文件，并且功能正常工作 ->放回不同的目录和... 哎呀不工作！

更多调试和...

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

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

奇怪的事情和我不明白的是，在这两种方法中，检索到的文件，而在以前的情况下，只有该功能不起作用???

相关内容

最新更新

热门标签：