无法在SharePoint内容编辑器Web部件中加载两个AngularJS组件

嗨，我来帮你排查下这个问题～ 你的第二个Angular组件无法正常工作，核心原因是AngularJS默认只会自动初始化页面中第一个出现的ng-app指令，后面的ng-app不会被自动引导，所以第二个组件的绑定逻辑根本没跑起来。

下面给你两种可行的解决办法，你可以根据需求选择：

方法一：手动引导第二个Angular应用 #

既然自动引导只认第一个ng-app，那我们可以手动初始化第二个应用。修改第二个Web部件的代码如下：

<!-- 去掉ng-app属性，改为手动引导 -->
<div id="app1-container" ng-controller="myCtrl1">
  First Name: <input type="text" ng-model="firstName1"/> <br/>
  Last Name: <input type="text" ng-model="lastName1"/> <br/> <br/>
  Full Name: {{firstName1 + " " + lastName1}}
</div>
<script>
// 定义应用模块
var app1 = angular.module('myApp1', []);
app1.controller('myCtrl1', function($scope) {
  $scope.firstName1 = "John";
  $scope.lastName1 = "Doe";
});
// 手动绑定并初始化应用
angular.bootstrap(document.getElementById('app1-container'), ['myApp1']);
</script>

方法二：使用单一Angular应用 + 多个控制器（更推荐） #

其实同一页面完全没必要搞两个独立的Angular应用，把两个组件放到同一个ng-app下，用不同的控制器就可以了，这样作用域管理更清晰，也避免了手动引导的麻烦。

修改后的第一个Web部件代码：

<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>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
// 额外定义第二个控制器，共用同一个应用模块
app.controller('myCtrl1', function($scope) {
  $scope.firstName1 = "John";
  $scope.lastName1 = "Doe";
});
</script>

第二个Web部件代码（只需绑定控制器，无需重复定义模块）：

<div ng-controller="myCtrl1">
  First Name: <input type="text" ng-model="firstName1"/> <br/>
  Last Name: <input type="text" ng-model="lastName1"/> <br/> <br/>
  Full Name: {{firstName1 + " " + lastName1}}
</div>

额外注意事项 #

确保你的SharePoint页面已经正确加载了AngularJS库，而且要保证AngularJS在这两个Web部件的脚本之前加载，否则会出现angular is not defined的错误哦～

内容的提问来源于stack exchange，提问作者RealSteel