many functions in a controller on 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!");
        };
    });
})();

i'm new on AngularJS and i can't understand my error. I see a lot of example in a single file (html with tag script) but i prefer to separate the controller with the html file. in my mind, I intended to connect the controller without scope, simply replacing "this" with vm (var vm = this). I just want to do some simple tests with the functions, but i always get this error:

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

the first function work normally, i get the response from the "vm.saluto()" only if i call with the format: {{vm.saluto}}. why onclick and other not work?

Any help? where is my mistake?

I am aware of the many cases similar to this, I have already displayed, but I have not found the solution

firstly you need quotes: onclick= vm.myFunction() -> onclick="vm.myFunction()". Secondly use angularjs syntax ng-click="vm.myFunction()" — Aleksey Solovey
– Aleksey Solovey, Commented Mar 14, 2018 at 13:43
Try read the basics about using AngularJS. This will help you a lot. — lin
– lin, Commented Mar 14, 2018 at 13:44

Sébastien · Accepted Answer · 2018-03-14 13:53:57Z

Your example, overall, should work.

Be aware that you have two body tags.

More importantly you should understand that the vm name you defined in controller as is not the same as the vm variable, which is local to your controller's function.

Finally you should avoid direct DOM manipulations when using AngularJS.

See example below:

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

Collectives™ on Stack Overflow

many functions in a controller on AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related