AngularJS 不代表视图中的控制器变量，它们是空的

Question

我在名为 index.js 的脚本中有此 javascript 代码，在 index.html 中有 html 代码，问题是 "message" 变量是不在屏幕上绘制它。

有谁知道我做错了什么？我已经很习惯 Angular 但我刚开始使用 AngularJS，因为我有一个项目要交付给客户，他们希望使用这种技术。

一句问候。

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>

Answer 1

使用 $scope 而不是这个。

在 HTML 视图中只能访问在 $scope 中声明的变量。

更多信息：'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>

Answer 2

可以直接使用 $scope.mensaje = "//你的文字在这里";

AngularJS 不代表视图中的控制器变量，它们是空的

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

angularjs

angularjs-scope