引导使用多个ng-app [英] bootstrap to use multiple ng-app

问题描述

我遵循了页面内的AngularJS多个ng-app中的代码

我不知道我在想什么.

    var reviewApp = angular.module("reviewApp", []);
var reviewApp2 = angular.module("reviewApp2", []);

reviewApp.controller("reviewCtrl",
                     function ShippingAddressCtrl($scope, $http) {
    $scope.name='leo1';
});

reviewApp2.controller("productController",
                     function ProductController($scope, $http) {
    $scope.name1='leo2';
});
angular.bootstrap(document.getElementById("div2"),['reviewApp2']);

http://jsfiddle.net/lordango/X3ZsU/1/

推荐答案

自举多个应用程序时，不能多次使用ng-app属性，angular会在标记中使用第一个属性并自动引导它，所有其他ng-app被忽略，您必须手动对其进行引导

When you are bootstrapping multiple apps, you can not use ng-app attribute more than once, angular takes the first one in markup and bootstraps it automatically, all the other ng-apps are ignored and you have to bootstrap them manually

var reviewApp = angular.module("reviewApp", []);
var reviewApp2 = angular.module("reviewApp2", []);

reviewApp.controller("reviewCtrl",
                     function ShippingAddressCtrl($scope, $http) {
    $scope.name='leo1';
});

reviewApp2.controller("productController",
                     function ProductController($scope, $http) {
    $scope.name1='leo2';
});
angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById("div1"),['reviewApp']);
    angular.bootstrap(document.getElementById("div2"),['reviewApp2']);
});

html

<div id="div1">
<div ng-controller="reviewCtrl">{{name}}</div>
</div>

<div id="div2">
<div ng-controller="productController">{{name1}}</div>
</div>

这篇关于引导使用多个ng-app的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！