gpt4 book ai didi

javascript - 与 Play 一起使用的 AngularJs 无法找到或实例化模块

转载 作者:行者123 更新时间:2023-11-28 05:12:37 25 4
gpt4 key购买 nike

我正在使用 Play 框架 (2.5.9)。在我的 scala html 模板上,我通过 WebJars 引入 Angular。接下来,我指定要用于我的页面的模块和 Controller 。但是,当我尝试加载页面时,应该通过 AbstractACtrl 设置为“hi”的相关变量没有被设置。另外,我在浏览器控制台中收到以下错误:

Error: [$injector:modulerr] Failed to instantiate module abstractA due to:
[$injector:nomod] Module 'abstractA' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我不明白为什么模块“abstractA”不可用。我在 view.scala.html 页面上定义它...我非常确定 angular.js 正在被引入,因为在 Chrome 中,源显示 webjars/angular.js/1.5.9/angular.js 。下面代码中的所有 console.log 和 console.error 只是我输出到控制台进行调试的消息。现在实际上没有一个打印到控制台,这表明执行永远不会到达它们。

我尝试过的事情:

1) 直接加载 angular.js(无需 WebJars)。

2) 使用/不使用 WebJars 引入 angular-route.js、angular-resource.js 和/或 angular-animate.js。

3) “data-ng-app” - 将其设置为“ng-app”或“x-ng-app”。

4) 将 $scope 传递给 Controller ​​并通过“$scope.”引用所有字段...而不是“this.”...

5) 在我的 JavaScript“var ab”开头改为“var abstractA”。

6)将拉入 Angular 脚本放在“head”部分而不是“body”部分。

7) 删除​​“this.originalAs = @aDocs;”来自 Controller 的线路。

8) 将所有 javascript 放在页面的“head”部分。

下面是我当前的代码。请告诉我为什么模块“abstractA”不可用。

构建.sbt:

libraryDependencies ++= Seq(
...
"org.webjars" % "angularjs" % "1.5.9",
"org.webjars" % "angular-ui-bootstrap" % "2.2.0",
"org.webjars" % "bootstrap" % "3.3.7-1",
"org.webjars" %% "webjars-play" % "2.5.0"
)

view.scala.html:

@(aDocs: List[String],
webJarAssets: controllers.WebJarAssets)

<!DOCTYPE html>

<meta charset='utf-8'/>

<html lang='en'>

<head>
<link rel='stylesheet' href='@routes.WebJarAssets.at(webJarAssets.locate("css/bootstrap.min.css"))' />
<link rel='stylesheet' type='text/css' href='@routes.Assets.versioned("assets/stylesheets/style.css")' />
</head>

<body>

<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular.js"))' />

<script type="text/javascript">
var abstractA = {};
abstractA.module = angular.module('abstractA', []);
abstractA.module.controller('abstractACtrl', ['$http', AbstractACtrl]);

function AbstractACtrl($http) {
var controller = this;
this.name = "Abstract A Controller";
this.abc = "hi";
console.log("log beginning of controller");
console.error("error beginning of controller");
this.originalAs = @aDocs;

this.setUrl = function() {
console.error("error in setUrl");
console.log("log in setUrl");
};
}
</script>

<div data-ng-app='abstractA' x-ng-controller='AbstractACtrl as abstractACtrl'>
...
<div ng-repeat="originalA in abstractACtrl.originalAs">
<p>{{originalA}}</p>
</div>
<p>{{abstractACtrl.abc}}</p>
<p>{{abc}}</p>
<button ng-click='abstractACtrl.setUrl()'>Click!</button>
</div>
</body>
</html>

最佳答案

我找到了一个解决方案(多么烦人的错误!)。它没有在任何地方记录...

我必须更改这一行:

this.originalAs = @aDocs;

至:

this.originalAs = "@aDocs";

然后,使用 Javascript split() 函数将其转换为列表,以便在页面的其余部分中使用。

由于某种原因,解析错误给出了无法找到模块本身的错误语句。经过多次尝试和错误才意识到这是根本原因。

关于javascript - 与 Play 一起使用的 AngularJs 无法找到或实例化模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41231360/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com