Question

我正在学习AngularJS并正在玩依赖注入和插值。

我在chrome中的dev工具中遇到以下两个错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it.

Uncaught SyntaxError: Unexpected token ( on line9 app.js

所以参考第一个错误，它清楚地表明它无法找到模块，我知道我已经核心地编写了它并在index.html中使用data-ng-app="myApp"声明了模块（我想确保我是html兼容，因此我使用数据前缀），并且在html标记中引用时显然没有错误。

这是app.js：

var myApp = angular.module("myApp", []);

myApp.controller("mainController", ['$scope', '$filter', function($scope, $filter){
   $scope.handle = '';
   $scope.lowercasehandle = function(){
      return $filter.('lowercase')($scope.handle);
   };
}]);

和index.html：

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
    <script src="//code.angularjs.org/1.5.0-rc.0/angular.js"></script>
    <script src="app.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div data-ng-controller="mainController">
    <label>What is your twitter handle? </label>
    <input type="text" data-ng-model="handle"/>
    <br/>
    <h1>twitter.com/{{ lowercasehandle() }}</h1>
</div>
</body>
</html>

正如您从html标记中看到的，我在顶部html标记中引用了“myApp”模块。

关于'意外令牌（'引用此行return $filter.('lowercase')($scope.handle);的第二个错误，我看不到任何无效的内容。

我知道我错过了一些东西，但我无法看到

Answer 1

转换此

$filter.('lowercase')($scope.handle);

到这个

$filter('lowercase')($scope.handle);

Answer 2

请检查一下。

$scope.lowercasehandle = function(){
      return $filter('lowercase')($scope.handle);
   };

Answer 3

根据角度文档here，

我们定义一个模块如下：

myApp

并为模块var app = angular.module("myApp"); app.controller("mainController", ['$scope', '$filter', function($scope, $filter){ $scope.handle = ''; $scope.lowercasehandle = function(){ return $filter('lowercase')($scope.handle); }; }]);定义控制器，您应该将其用作

{{1}}

Answer 4

您已注意到此错误Uncaught SyntaxError: Unexpected token ( on line9 app.js

与filter.('lowercase')相关的此错误将为filter('lowercase')

AngularJS依赖注入$ injector：modulerr错误

4 个答案: