2016-07-05 19 views
3

同じmvcビューページで同じng-appと同じng-controllerを何度も使用する必要があります。同じng-appとng-controllerを同じページに複数回表示mvc view

<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> 

ng-init関数の呼び出しパラメータが各divで異なるためです。同じng-appとng-controllerを別のng-appで何度も使用する最良の方法は何ですか?

+0

:この問題を回避するには、このように、他人を組み込んだ「親」のアプリを作成することができます。見てみましょう:http://stackoverflow.com/questions/22548610/can-i-use-one-ng-app-inside-another-one-in-angularjs#22548754 – developer033

+1

複数の場合は手動でアプリをブートストラップする必要がありますページ上 – Grundy

答えて

1

ng-appディレクティブをネストすることはできません。私はこれまで、私はあなたがNG-アプリを入れ子にしていることはできません知っているように

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'; 
 
});
<!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>

関連する問題