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

【问题标题】：angular function not called from ng-click?没有从ng-click调用角度函数？
【发布时间】：2016-05-24 16:24:44
【问题描述】：

谁能告诉我为什么在 ng-click 上没有调用 logUserIn() 函数？这让我抓狂？？？

在 login.html 中，在 loginController 中有一个带有 ng-click to 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');
    };
};
})();

【问题讨论】：

你能不能把函数 logUserIn() 改成 vm.logUserIn = funcion() 编辑：在 loginctrl.js 中
我已经试过了，但结果一样！
loginctrl 的其余部分是否正常工作？
是的，控制器的其余部分正在工作 vm.test 显示正确！
所以当您说对 vm.logUserIn = function() {} 的更改不起作用时 - 您是否在控制台中遇到任何错误？

标签： javascript angularjs angularjs-scope angular-ui-router

【解决方案1】：

您需要将 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');
  }
});

【讨论】：

您能提供更多信息吗？我必须把这个放在哪里？
我只是更改了我的代码，但它仍然无法正常工作！查看上面代码的变化！

【解决方案2】：

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

我所有的路径都始于 /cz-office/client/app....

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

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

更多的调试和...

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

而且...一切正常！！！！！

奇怪的是，我不明白的是，在这两种方法中，检索到的文件和在以前的情况下只有函数不起作用？？？

【讨论】：