Question

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    var app1 = angular.module('myApp1', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "sparsh";
        $scope.lastName = "khandelwal";
    });
</script>
<title>Home Page</title>
</head>
<body>
    <div ng-app="myApp" ng-init="name='Sparsh'">
        <div ng-controller="myCtrl">{{firstName}}</div>
        <p>
            Name : <input type="text" ng-model="name">
        </p>
        <h1>Hello {{name}}</h1>

    </div>
    <div ng-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        angular.bootstrap(document, ['myApp1','myApp']);
    </script>
</body>
</html>

虽然我可以看到预期的输出，但同时面临控制台错误。

enter image description here

这里是错误的描述

（我点击网址时）

enter image description here

它说已经引导了所以我从.bootstrap函数中删除了'myApp'，但是没有用。

请帮忙。

Answer 1

您正在执行ng-app声明和angular.bootstrap(document, ['myApp1','myApp']);。

您只需选择一种方法，否则您会得到多个自举应用程序的良好描述错误。

Answer 2

问题如前面的评论中所述，模块的自动和手动初始化。

由于您想为每个元素单独初始化它们，请尝试类似

的方法

<div data-app="myApp" ng-init="name='Sparsh'">
    <div ng-controller="myCtrl">{{firstName}}</div>
    <p>
        Name : <input type="text" ng-model="name"/>
    </p>
    <h1>Hello {{name}}</h1>

</div>
<div data-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
    <ul>
        <li ng-repeat="x in names">{{x}}</li>
    </ul>
</div>

然后

var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function ($scope) {
    $scope.firstName = "sparsh";
    $scope.lastName = "khandelwal";
});

var els = document.querySelectorAll('[data-app]');
for (var i = 0; i < els.length; i++) {
    angular.bootstrap(els[i], [els[i].dataset.app]);
}

演示：Fiddle

Angular：Bootstrap在控制台中给出错误

2 个答案: