Możesz użyć angular.bootstrap()
bezpośrednio ... Problem polega na tym, że tracisz zalety dyrektyw.
Najpierw musisz uzyskać odniesienie do elementu HTML, aby go uruchomić, co oznacza, że Twój kod jest teraz połączony z HTML.
Po drugie, związek między nimi nie jest tak oczywisty. Dzięki temu ngApp
możesz wyraźnie zobaczyć, jaki kod HTML jest powiązany z danym modułem i wiesz, gdzie szukać tych informacji. Ale angular.bootstrap()
można go wywołać z dowolnego miejsca w kodzie.
Jeśli masz zamiar to zrobić, najlepszym rozwiązaniem byłoby zastosowanie dyrektywy. Tak właśnie zrobiłem. To się nazywa ngModule
. Oto, jak wyglądałby Twój kod, używając go:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
Możesz pobrać kod źródłowy na:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
Jest implementowany w taki sam sposób jak ngApp
. Po prostu woła angular.bootstrap()
za kulisy.