Angularjs 连接到模块的自调用函数中定义的控制器不工作

Question

我有一个页面如下。控制器不工作。有人可以告诉我有什么问题吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="demoApp">
<head>
    <title>AnjularJs Hello World</title>
</head>
<body data-ng-controller="CustomerController">
    <h2>Customers</h2>
    <div id="Trial">{{name}}</div>
    <script src="Scripts/angular.js"></script>
    <script>
        (function () {
            alert("Inside Self invoking function. This is popping up.");
            CustomerController = function ($scope) { 
                alert("Inside controller. But this is NOT popping up");
                $scope.name = 'HeHe';
            };
            CustomerController.$inject = ['$scope'];
            angular.module('demoApp').controller('CustomerController', CustomerController);
        }());
    </script>
</body>
</html>

控制器内的警报未弹出。第一个警报弹出。此外，带有 id="Trial" 的 div 不打印名称。

我错过了什么？

Answer 1

您永远不会创建 demoApp-模块。使用 angular.module(name) 你得到一个已经创建的模块，使用 angular.module(name, dependencies) 你设置（创建）一个模块。所以只需添加：

angular.module('demoApp', []);

在 angular.module('demoApp') 线上方，您的电源线工作正常：

(function () {
    alert("Inside Self invoking function. This is popping up.");

    CustomerController = function ($scope) { 
                alert("Inside controller. But this is NOT popping up");
                $scope.name = 'HeHe';
            };
    CustomerController.$inject = ['$scope'];
  
    angular.module('demoApp', []);
            
    angular.module('demoApp').controller('CustomerController', CustomerController);
}());

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

<body ng-app="demoApp" data-ng-controller="CustomerController">
    <h2>Customers</h2>
    <div id="Trial">{{name}}</div>
</body>

Angularjs 连接到模块的自调用函数中定义的控制器不工作

Angularjs controller not working defined in a self invoking function hooked to a module

controller

module

angularjs