AngularJS 控制器中的许多功能？答案

【问题标题】：many functions in a controller on AngularJS?AngularJS 控制器中的许多功能？
【发布时间】：2018-03-14 13:39:27
【问题描述】：

<!DOCTYPE html>
    <html ng-app="myApp" >
        <head>
            <title>myApp.html</title>
        </head>

    <body ng-controller="myCtrl as vm">

    <br><br>
    <div>

       <p> Inserisci un colore <input style="background-color:{{colore}}" ng-model="colore" value="{{colore}}"> </p>
        <body bgcolor="{{colore}}">
    </div>

    <div > 

       <p>Nome: <input style="background-color:{{colore}}" type="text" id="nome" onkeyup="" ng-model="vm.utente.nome"></p> 
       <p>Cognome: <input style="background-color:{{colore}}" type="text" id="cognome" ng-model="vm.utente.cognome"></p>

       <p id="prova" value="test">{{myFunction}}</p>
       <p>{{vm.saluta() | uppercase}}</p>

    </div>



       <p id="demo">prova</p>

        <button onclick= vm.myFunction()> Prova</button>

            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
            <script type="text/javascript" src="C:\Users\user1\Desktop\myCtrl.js"></script>
</body>
</html>

我的Ctrl.js

(function() {
    'use strict';
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function() {
        var vm=this;
        vm.utente = {nome: "Mario", cognome: "Rossi"}; 

        vm.saluta = function() {
            return "Buongiorno " +
                this.utente.nome + " " +
                this.utente.cognome + "!"

        };

        vm.myFunction = function() {
        var text = document.getElementById("demo").innerHTML;
        document.getElementById("demo").innerHTML = text.toUpperCase();
        };

        function test2() {
         console.log("Hello!");
        };
    });
})();

我是 AngularJS 的新手，我无法理解我的错误。我在单个文件（带有标记脚本的 html）中看到了很多示例，但我更喜欢将控制器与 html 文件分开。在我看来，我打算在没有范围的情况下连接控制器，只需将“this”替换为 vm（var vm = this）。我只想对函数做一些简单的测试，但我总是得到这个错误：

myApp.html: 30 Uncaught ReferenceError: vm is not defined at HTMLButtonElement.onclick (myApp.html: 30)

第一个函数正常工作，只有当我使用以下格式调用时，我才会从“vm.saluto()”得到响应：{{vm.saluto}}。为什么 onclick 和其他不起作用？

有什么帮助吗？我的错在哪里？

我知道很多类似的情况，我已经展示过了，但是我没有找到解决办法

【问题讨论】：

首先你需要引号：onclick= vm.myFunction() -> onclick="vm.myFunction()"。其次使用angularjs语法ng-click="vm.myFunction()"
尝试阅读有关使用 AngularJS 的基础知识。这会对你有很大帮助。
请更正您的语法并重新发布，谢谢...
是的，即使先阅读基础知识然后重新发布，两者都是正确的

标签： javascript angularjs angular-controller

【解决方案1】：

总体而言，您的示例应该有效。

请注意，您有两个 body 标签。

更重要的是，您应该明白，您在 controller as 中定义的 vm 名称与您的控制器函数本地的 vm 变量不同。

最后你应该在使用 AngularJS 时避免直接的 DOM 操作。

请看下面的例子：

(function() {
  'use strict';
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function() {
    var vm = this;
    vm.utente = {
      nome: "Mario",
      cognome: "Rossi"
    };

    vm.saluta = function() {
      return "Buongiorno " +
        this.utente.nome + " " +
        this.utente.cognome + "!"

    };
    vm.test = 'prova';
    vm.myFunction = function() {
      vm.test = vm.test.toUpperCase();
    };

    function test2() {
      console.log("Hello!");
    };
  });
})();

<html ng-app="myApp">

<body ng-controller="myCtrl as vm">
  <p>{{vm.utente.nome}}</p>
  <p>{{vm.saluta()}}</p>
  <button type="button" ng-click="vm.myFunction()">test</button>
  <p id="demo">{{ vm.test }}</p>
</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

【讨论】：