AngularJS代码只在html文件中运行，而不在外部文件中运行

AngularJS code only runs in the html file, not in an external file

本文关键字：运行 文件 外部 代码 AngularJS html      更新时间：2023-09-26

这个AngularJS代码在位于HTML文件中时工作：

<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
    <head>
        <link rel="shortcut icon" href="IM/Coins.png" />
        <title>TITLE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <!-- Change to min -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
        <script>
            angular.module('ChgReqApp', []);
            angular.module('ChgReqApp').controller('MainController', function ($scope) {
                $scope.ClientInfo = {};
                $scope.ChangeRequests = [];
            });
        </script>
        <script src="JS/MainController.js"></script>
    </head>
    <body ng-cloak ng-controller="MainController">
    </body>
</html>

主控制器.js文件如下所示，警报对话框按预期工作：

// MainController.js
$(function () {
    alert("MainControllerFile");
});

现在，当我将控制器代码移动到 MainController.js 文件时，出现错误：

<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
    <head>
        <link rel="shortcut icon" href="IM/Coins.png" />
        <title>TITLE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <!-- Change to min -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
        <script>
            angular.module('ChgReqApp', []);
        </script>
        <script src="JS/MainController.js"></script>
    </head>
    <body ng-cloak ng-controller="MainController">
    </body>
</html>
//MainController.js
$(function () {
    angular.module('ChgReqApp').controller('MainController', function ($scope) {
        $scope.ClientInfo = {};
        $scope.ChangeRequests = [];
    });
});

错误是：

Error: [ng:areq] Argument 'MainController' is not a function, got undefined
http://errors.angularjs.org/1.4.8/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined
    at ...

我已经搜索了这个问题的解决方案，但我发现的所有讨论都与不适用于上述代码的其他一些问题有关。 外部 js 文件有效，脚本顺序正确。 非常感谢对此的任何帮助。

不需要

$(function() {})，因为Angular有自己的"文档就绪业务"（只是为了简化到最大的:P）。

问题是 Angular 无法运行其"Document Ready Business"，因为您将 Angular 内容放入 jQuery 的"Document Ready"速记中，这会阻止 Angular 框架正常工作。

您可以在 Angular 的文档中找到更多相关信息

Angular 在 DOMContentLoaded 事件或以下情况下自动初始化 如果当时 document.readyState ，则评估 angular.js 脚本 设置为"完成"。此时，Angular 会寻找 ng-app 指令，指定应用程序根目录。

我想你可以看到这与你想做的事情是如何冲突的。

同样作为附加建议，如下所示：

angular.module('ChgReqApp', []).controller('MainController', function($scope) {
    $scope.ClientInfo = {};
    $scope.ChangeRequests = [];
});

或像这样（我的偏好）

var app = angular.module('ChgReqApp', []);
app.controller('MainController', function($scope) {
    $scope.ClientInfo = {};
    $scope.ChangeRequests = [];
});

(function() {
    angular
        .module("ChgReqApp", [])
        .controller("MainController", MainController);
    MainController.$inject = ["$scope"];
    function MainController($scope) {
        $scope.ClientInfo = {};
        $scope.ChangeRequests = [];
    };
})();

您可以在此处阅读更多信息：https://github.com/johnpapa/angular-styleguide

这就是我发现解决我的问题的原因......

  • CHROME浏览器正在缓存（主控制器.js）

  • 我通过查看（Chrome devtools，网络选项卡，主控制器.js文件，响应选项卡）（* 代码不同*)

在Chrome中打开一个新标签页（修复了缓存的主控制器.js文件）

我遇到了同样的问题。我只是想在外部的主控制器.js文件中放置一些值。

<script src="./js/controllers/MainController.js"></script>

由于某种原因它不起作用（从这个文件）...

但。。。当我直接从 HTML 文件进行测试时（它有效）

    app.controller('MainController', ['$scope', function($scope) {
    // SCOPE
    $scope.test = "test(HTML FILE)";
    $scope.test2 = 'test2(HTML FILE)';
}]);

。但不在外部文件中？

停用缓存 （CHROME）

  • 打开 CHROME， （开发工具）， 网络 选项卡， 单击 （打开） （禁用缓存）

试试这个

<!DOCTYPE html>
<html lang="en" ng-app="ChgReqApp">
    <head>
        <link rel="shortcut icon" href="IM/Coins.png" />
        <title>TITLE</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <!-- Change to min -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
        <script src="JS/MainController.js"></script>
    </head>
    <body ng-cloak ng-controller="MainController">
    </body>
</html>

主控制器.js

angular.module('ChgReqApp').controller('MainController', function ($scope) {
alert('in main controller');
            $scope.ClientInfo = {};
            $scope.ChangeRequests = [];
        });
相关文章：