在我的控制器中,我有一个名为 "chiliClick" 的函数。为什么不调用?

In my controller I have function named "chiliClick". Why is it not invoking?

我有两个同名的函数"chiliClick"。即使在按下按钮 chili 之后,未注释的函数也不会调用,也不会在控制台中抛出任何错误。但是,相同的功能(已注释)可以使用相同的代码正常工作。有什么不同吗?请帮忙

(function(){

  var app = angular.module("myApp", []);

  var clickController = function($scope){

    $scope.spicy = 'very';

    function chiliClick(){
      $scope.spicy = 'chili';  
    }

    // $scope.chiliClick = function(){
    //   $scope.spicy = 'chili'; 
    // }

  };

  app.controller("clickController", clickController);

}());// Code goes here

    <!DOCTYPE html>
<html lang="en" ng-app="myApp">

  <head>
    <meta charset="UTF-8">
    <title>Hello Controller </title>

  </head>

  <body>

    <div ng-controller="clickController">
       <button ng-click="chiliClick()">Chili</button>
       <button>jalapeño</button>
       <p> this is {{spicy}} hot <p>
    </div>


     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
     <script src="myApp.js"></script>
  </body>

</html>

函数的声明有什么区别"chiliClick"?

是的!有很大的不同。

因为在你的注释函数中你写道:

$scope.chiliClick = ...

执行此操作时,您将函数提供给作用域,因此您的 HTML 知道 chiliClick 函数。

但是当你只是按照未注释的方式执行操作时,你的 HTML 对该函数一无所知(因为它是局部变量,在你的控制器函数中声明)。

第一个创建局部函数。

function chiliClick(){
    $scope.spicy = 'chili';  
}

这意味着它本质上是控制器范围内的本地对象。您可以在该范围内调用它,但您永远不会这样做。您可以认为这在概念上类似于其他语言中的 private 函数。

第二个创建一个函数作为 $scope 对象的 属性。

$scope.chiliClick = function(){
   $scope.spicy = 'chili'; 
}

这次,您已将函数附加到angular 允许您调用的对象($scope 对象)。您可以将其视为类似于 public 函数。