有沒有什麼辦法可以在AngularJs中使用兩個ng-app像父和小應用程序？

Question

HTML

再檢查一下出了下面的示例HTML，我需要這樣的事情。

<div id="parentApp" ng-app="parentApp" ng-cloak="" ng-controller="mainController"> 
    <div id="someContent"> 
     {{$scope.parentName}} 
     ***some parent app actions*** 
    </div> 
    <div id="childApp" ng-app="childApp"> 
     <div id="someContent" ng-controller="secondController"> 
      {{$scope.childName}} 
      ***some child app actions*** 
     </div> 
    </div> 
</div> 

腳本

2簡單的應用程序，並更好地理解目的控制器。

var parentApp = angular.module('parentApp', []); 
parentApp.controller('mainController', function($scope, $http) { 
    $scope.parentName = 'Parent!!' 
}); 

var childApp = angular.module('childApp', []); 
childApp.controller('secondController', function($scope, $http) { 
    $scope.childName = 'Child!!' 
}); 

Answer 1

您不能在頁面上使用2 ng-app屬性。

然而，看着你的需求，我認爲你需要使用2個控制器，並且在保持HTML結構中父子的外觀的同時做一些事情。要做到這一點，您可以使用angular.bootstrap方法。

所以，你可以修改HTML如下：

<div id="parentApp" ng-cloak="" ng-controller="mainController"> 
    <div id="someContent"> 
     {{$scope.parentName}} 
     ***some parent app actions*** 
    </div> 
    <div id="childApp" ng-app="childApp"> 
     <div id="someContent" ng-controller="secondController"> 
      {{$scope.childName}} 
      ***some child app actions*** 
     </div> 
    </div> 
</div> 

而在你的代碼，你可以按照以下初始化：

var parentAppDivId = document.getElementById('parentApp'); 
angular.bootstrap(parentAppDivId, ['parentApp']); 
var parentApp = angular.module('parentApp', []); 
parentApp.controller('mainController', function($scope, $http) { 
    $scope.parentName = 'Parent!!' 
}); 

var childAppDivId = document.getElementById('childApp'); 
angular.bootstrap(childAppDivId, ['childApp']); 
var childApp = angular.module('childApp', []); 
childApp.controller('secondController', function($scope, $http) { 
    $scope.childName = 'Child!!' 
}); 

Answer 2

如果你已經有兩個單獨的應用程序，並試圖要在另一個應用中利用其中的一部分，您可以將該模塊從一個應用注入到另一個應用中。它與上面概述的結構相同，但它會使第二個應用中的第一個應用可用。

angular.module('childApp', ['parentApp'])...