有没有什么办法可以在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'])...