Fatal编程技术网
  • angularjs/
  • Angularjs 声明多个模块时出现角度错误

Angularjs 声明多个模块时出现角度错误

angularjs

Angularjs 声明多个模块时出现角度错误,angularjs,angularjs-scope,angular-ui,angular-directive,Angularjs,Angularjs Scope,Angular Ui,Angular Directive,我是Angular JS的新手（如果我的术语不正确或解释不充分，我深表歉意） 我试图做一个演示创建多个模块，只是返回消息。我的domo只有2个文件，我正在复制下面的完整代码 JS: var app = angular.module("app", ['controllers1', 'controllers2']); angular.module('controllers1', []).controller('MainController', function($scope) {

我是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";
        }

    }
    );

<!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>
HTML:

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";
        }

    }
    );

<!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+2}}
{{message1}}
{{func1（）}}



{{
{{message2}}
{{func2（）}}
}}
问题： 如果我只创建一个模块，它可以正常工作，但如果我创建两个模块，它会给出奇怪的错误。你能告诉我谁来修复这个错误，创建多个模块并使用它们吗

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

错误：[$parse:syntax]http://errors.angularjs.org/undefined/$parse/syntax？p0=message2&p1=is%20意外的%2C%20预期的%20%5B%3A%5D&p2=16&p3=%0A%20%20%20%20%20%20%20%20%20%7B%7B消息2&p4=message2

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

试试这句话：


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


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


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




{{
{{message2}}
{{func2（）}}
}}


尝试移除这些额外的支架，如下所示：


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




{{message2}}
{{func2（）}}


如果打开提供的链接（），将显示以下消息：

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


因此，是的，抛出错误是因为您在HTML模板中使用了无效的表达式。
请检查此操作

你的问题是花括号


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


正如丹尼洛指出的那样


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



要对此进行扩展，您可以获取errors.angularjs.org链接并在浏览器中打开它，以查看实际问题：…这显示语法错误：标记'message2'是意外的，在表达式[{message2]的第16列预期为[：]，从[message2 L/@HarishR]开始，谢谢，它起作用了。抱歉，我没有让您知道“也如丹尼洛所指出的”？你能解释一下吗？“哈恩西，检查一下我的答案。你会明白的。