Question

我需要在同一个mvc视图页面中多次使用相同的ng-app和相同的ng-controller。

<div ng-app="rootapp" ng-controller="rootcontroller">
<div id="div1">
---first content--------
    <div ng-app="editorApp" ng-controller="editorController" ng-init="getInformation('SettingsDuplicates')">

                    <div class="col-sm-2 validation-right" style="width:12.666667%">
                        <div class="greySlideB">
                            @Html.Partial("~/Views/Shared/Information/_InformationPartial.cshtml")

                            @Html.Partial("~/Views/Shared/RecentNotes/_RecentNotesPartial.cshtml")
                        </div>
                    </div>
                </div>
</div>

<div id="div2">
.......second content-------
    <div ng-app="editorApp" ng-controller="editorController" ng-init="getInformation('SettingsDuplicates')">

                    <div class="col-sm-2 validation-right" style="width:12.666667%">
                        <div class="greySlideB">
                            @Html.Partial("~/Views/Shared/Information/_InformationPartial.cshtml")

                            @Html.Partial("~/Views/Shared/RecentNotes/_RecentNotesPartial.cshtml")
                        </div>
                    </div>
                </div>
</div>


</div>

因为每个div的ng-init函数调用参数不同。在另一个ng-app中多次使用相同的ng-app和ng-controller的最佳方法是什么。

Answer 1

您无法使用嵌套的ng-app指令。为了解决这个问题，你可以创建一个父母＆＃34;包含其他内容的应用程序，如下所示：

＆＃13;

var rootApp = angular.module('rootApp', []);
var editorApp = angular.module('editorApp', []);
var mainApp = angular.module('mainApp', ['rootApp', 'editorApp']);

rootApp.controller('rootController', function($scope) {
  $scope.name = 'root app';
});

editorApp.controller('editorController', function($scope) {
  $scope.name = 'editor app';
});

＆＃13;

<!DOCTYPE html>
<html ng-app="mainApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>      
  </head>

<body>
  <div ng-controller="rootController">
    <p>Hello {{name}}!</p>
  </div>
  <div ng-controller="editorController">
    <p>Hello {{name}}!</p>
  </div>
</body>

</html>

＆＃13;

在同一页面mvc视图中多次使用相同的ng-app和ng-controller

1 个答案: