$scope 破坏了 Angularjs Portlet 应用程序

Question

我正在尝试使用直接从 W3s example 复制的最简单的应用程序让 AngularJS 在我的 .jsp 页面中运行

更新：我正在尝试在 Liferay portlet 中使用 angular，所以这是我在 view.jsp 中的代码范围

<%
/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 */
%>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script type='text/javascript'>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

但是，一旦我尝试使用我的 Controller + $scope 对象，应用程序就会中断并出现错误

Failed to instantiate module myApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=n...)
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:40:134
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:391
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
    at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:43:246)
    at Ac.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:19

我不知道为什么会这样。有什么想法吗？

Answer 1

由于某种原因，从您的错误来看，代码似乎认为您正在尝试注入“a”。

如果可能的话，我建议你把它放在一个单独的脚本中，然后包装在一个 IIFE 中：

app.js：

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

然后将其包含在您的 HTML 中：

<script src="app.js"></script>