javascript - 无法在 sharepoint 内容编辑器 web 部件中加载 2 个 angularJS 组件

Question

我有一个要求，需要在同一页面上加载2个 Angular 组件。首先，我获取了一个内容编辑器 Web 部件，并在 HTML 源代码中粘贴了我的 Angular 代码，我正在从 SharePoint 获取列表，然后显示在页面上。

我的第一个自定义编辑器 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";
    });
</script>

现在，我已经采用了新的自定义编辑器Web部件，并且几乎编写了相同的代码，仅更改了属性名称，但我无法绑定(bind) Angular 到第二个 Web 部件。

我的第二个 Web 部件代码:

<div ng-app="myApp1" 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 + &quot; &quot; + lastName1}} </div> 
<script>
var app = angular.module('myApp1', []);
app.controller('myCtrl1', function($scope) {
    $scope.firstName1 = "John";
    $scope.lastName1 = "Doe";
});
</script><br/>

谁能告诉我我在这里犯的错误吗？
我能够正确加载第一个组件。
我需要在同一页面上加载2个组件。

Answer 1

您不能在同一页面上使用 2 个 ng-app 指令。这是设计使然。

但是，您可以使用多个 Controller 并使用 angular.bootstrap 方法初始化 Angular 组件。

修改您的第一个 Web 部件代码，如下所示:

<div id="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 myfirstAppDivId = document.getElementById('myApp');
    angular.bootstrap(myfirstAppDivId, ['myApp']);
    var myfirstApp = angular.module('myApp', []);    

    myfirstApp.controller('myCtrl', function ($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

修改您的第二个 Web 部件代码，如下所示:

<div id="myApp1" 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 + &quot; &quot; + lastName1}} </div> 
<script>
    var mysecondAppDivId = document.getElementById('myApp1');
    angular.bootstrap(mysecondAppDivId, ['myApp1']);
    var mysecondApp = angular.module('myApp1', []);    

    mysecondApp.controller('myCtrl1', function($scope) {
        $scope.firstName1 = "John";
        $scope.lastName1 = "Doe";
    });
</script><br/>