AngularJS 控制器中的许多功能？

Question

<!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>

myCtrl.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 和其他不起作用？

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

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

Answer 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>

AngularJS 控制器中的许多功能？

many functions in a controller on AngularJS?

javascript

angularjs

angular-controller