Question

我正在尝试使用具有动态驱动控制器的AngularJS运行本地网页。我想要一个URL变量来驱动哪个特定的javascript文件加载了数据来驱动我的页面。

HTML文件

<html>
    <head >
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
        <script>
            var app = angular.module("myApp", []);
        </script>

        <script>
            var url = new URL(window.location.href);
            var t_var= url.searchParams.get("t_var");
            var x = document.createElement('script');
            x.src = t_var +'.js';
            document.getElementsByTagName("head")[0].appendChild(x);
        </script>
    </head>
    <body ng-app='myApp' ng-controller='Ctrl1'>
        {{sub1Variable}}
    </body>
</html>

AngularJS控制器

app.controller("Ctrl1", function($scope) {
    $scope.sub1Variable = 'sub1'
});

如果我在HTML文件中包含以下标记，我将使其正常工作。

<script src="sub1.js"></script>

我一直收到错误消息，未引用具有该名称的控制器。

Answer 1

原则上，您在这里所做的应该没问题。见下文。

app.controller("Ctrl1", function($scope) {
    $scope.sub1Variable = 'sub1'
});

<html>
    <head >
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
        <script>
            var app = angular.module("myApp", []);
        </script>
    </head>
    <body ng-app='myApp' ng-controller='Ctrl1'>
        {{sub1Variable}}
    </body>
</html>

如果运行该命令，您应该在输出中看到“ sub1”。

因此，如果您收到错误消息，说明您的控制器未注册，那么几乎可以肯定的问题是您没有加载包含控制器注册的JavaScript文件。确保在加载角度并注册模块后的某个时刻，通过app.controller...元素包含了包含<script>行的脚本。

（请记住，为了方便起见，SO Snippet和CodePen等将隐式包含JavaScript，在实际代码中，我们需要自己做）。

实际上，如果这只是一个快速的本地应用程序，也许您可以将其包含在与模块注册相同的脚本元素中，如下所示：

<html>
    <head >
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
        <script>
            var app = angular.module("myApp", []);
            app.controller("Ctrl1", function($scope) {
                 $scope.sub1Variable = 'sub1'
            });
        </script>
    </head>
    <body ng-app='myApp' ng-controller='Ctrl1'>
        {{sub1Variable}}
    </body>
</html>

用本地HTML页面分隔AngularJS控制器文件

1 个答案: