0

我是 Angular JS 的新手（如果我的术语不正确或解释不够充分，我深表歉意）。

我正在尝试做一个演示，创建多个模块，这些模块只是返回消息。我的 domo 只有 2 个文件，我在下面复制完整的代码。

JS：

var app = angular.module("app", ['controllers1', 'controllers2']);

    angular.module('controllers1', []).controller('MainController', function($scope) {

        $scope.message1 = "controllers1 message";
        $scope.func1 = function () {
            return "controllers1 func";
        }

        }
    );

    angular.module('controllers2', []).controller('MainController2', function ($scope) {

        $scope.message2 = "controllers2 message";
        $scope.func2 = function () {
            return "controllers2 func";
        }

    }
    );

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
        <script src="JS/Index.js"></script>

    </head>
    <body>
        {{2+2}}

        <div ng-controller="MainController1">
            {{message1}}
            {{func1()}}
            <br /><br/>

            <div ng-controller="MainController2">
                {{
                {{message2}}
                {{func2()}}
                }}
            </div>

        </div>
    </body>
</html>

问题： 如果我只创建一个模块，它工作正常，但如果我创建 2 个模块，它会给出奇怪的错误。您能否指导我修复此错误并创建多个模块并使用它们。

Error: [$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=message2&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=16&p3=%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bmessage2&p4=message2
L/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:446
Ya.prototype.throwError@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:152:392
Ya.prototype.consume@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:153:338
Ya.prototype.object@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:161:34
Ya.prototype.primary@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:152:26
Ya.prototype.unary@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:158:114
Ya.prototype.multiplicative@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:158:1
Ya.prototype.additive@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:157:365
Ya.prototype.relational@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:157:1
Ya.prototype.equality@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:157:1
Ya.prototype.logicalAND@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:156:1
Ya.prototype.logicalOR@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:156:346
Ya.prototype.ternary@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:156:1
Ya.prototype.assignment@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:155:1
Ya.prototype.expression@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:155:369
Ya.prototype.filterChain@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:155:1
Ya.prototype.statements@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:154:292
Ya.prototype.parse@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:151:19
td/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:89:450
f@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:72:89
t@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:56:1
oa@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:45:14
E@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:136
E@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:252
E@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:252
E@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:252
v@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:41:303
Wb/c/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:455
wd/this.$get</g.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:187
wd/this.$get</g.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:452
Wb/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:413
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:30:321
Wb/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:321
Wb@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:23
Oc@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:96
@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:198:494
a@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:128:229
Uc/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:26:466
q@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:7:259
Uc/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:26:439

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js
Line 83
4

2 回答 2

1

请检查此工作代码 - PLUNKER LINK

你遇到的问题是大括号

      {{ //remove this
            {{message2}}
            {{func2()}}
      }} //remove this as well

也正如达尼洛指出的那样

angular.module('controllers1', [])
.controller('MainController1', function($scope) {
于 2014-07-22T02:28:48.087 回答
1

您似乎在声明一个MainController控制器，但您MainController1在ng-controller指令中引用。

试试这条线：

angular.module('controllers1', []).controller('MainController1', function($scope) {

另外，我不明白你想用这些代码行做什么：

<div ng-controller="MainController2">
    {{
        {{message2}}
        {{func2()}}
    }}
</div>

尝试删除那些额外的括号，如下所示：

<div ng-controller="MainController2">
    {{message2}}
    {{func2()}}
</div>

如果您打开提供的链接（这个），它会显示以下消息：

语法错误：令牌“message2”是意外的，在表达式 [ {{message2] 从 [message2] 开始的第 16 列应为 [:]。

所以是的，因为您在 HTML 模板中使用了无效的表达式，所以引发了错误。

于 2014-07-22T02:21:55.427 回答