AngularJS does not represent the controller variables in the view, they are empty

Question

I have this javascript code in a script called index.js and the html in an index.html, the problem is that the "message" variable is not painting it on the screen.

Does anyone know what I'm doing wrong? I am very used to Angular but I have just started with AngularJS since I have a project to deliver to the client and they want it in this technology.

A greeting.

angular.module('holamundo', [])
        .controller('miControlador', miControlador);

    function miControlador(){
        var scope = this;
        scope.mensaje = "Hola, ¿Como estas?";

        console.log(scope);

        init();

        function init(){
        }
    }

<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular JS - Hola Mundo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="./index.js"></script>
</head>
<body>
    <div>
        {{mensaje}}
    </div>
</body>
</html>

use $scope instead of this. Wollah your project got delivered — M A Salman, Apr 06 '20 at 15:57

score 0 · Accepted Answer · answered Apr 06 '20 at 16:06

Use $scope instead of this.

Only the variables declared in $scope are accessible in HTML view.

More here: 'this' vs $scope in AngularJS controllers

angular.module('holamundo', [])
        .controller('miControlador', miControlador);

    function miControlador($scope){
        var scope = $scope;
        scope.mensaje = "Hola, ¿Como estas?";
        init();

        function init(){
        }
    }

<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular JS - Hola Mundo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="./index.js"></script>
</head>
<body>
    <div>
        {{mensaje}}
    </div>
</body>
</html>

score 0 · Answer 2 · answered Apr 10 '20 at 17:34

0

You can directly use $scope.mensaje = "//your text here";

answered Apr 10 '20 at 17:34

Rohit Hushare

61
7

AngularJS does not represent the controller variables in the view, they are empty

2 Answers2