Porównaj ceny domen i usług IT, sprzedawców z całego świata

Jak mogę zdefiniować dwie aplikacje/moduły kątowe na tej samej stronie?


Próbuję dodać dwie aplikacje/moduły kątowe do jednej strony.
Na poniższych skrzypcach widać, że zawsze tylko pierwszy moduł wymieniony w kodzie html będzie działał poprawnie, podczas gdy drugi nie jest rozpoznawany przez angular.
W tym

fiddle
http://jsfiddle.net/qmNvq/109/
możemy wykonać tylko metodę
doSearch2
, podczas gdy w tym

fiddle
http://jsfiddle.net/qmNvq/108/
tylko metoda
doSearch
działa poprawnie.
Szukam sposobu na prawidłowe umieszczenie dwóch modułów kątowych na tej samej stronie.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

W jednym dokumencie HTML można automatycznie załadować tylko jedną aplikację AngularJS. Pierwsza aplikacja ngApp znaleziona w dokumencie zostanie użyta do zdefiniowania elementu głównego, który ma być automatycznie ładowany jako aplikacja. Aby uruchomić wiele aplikacji w dokumencie HTML, należy zamiast tego ręcznie załadować je za pomocą angular.bootstrap. Aplikacje AngularJS nie mogą być zagnieżdżane w sobie.
--

http://docs.angularjs.org/api/ng.directive:ngApp
http://docs.angularjs.org/api/ ... obacz też
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Utworzyłem alternatywną dyrektywę, która nie ma ograniczeń
ngApp
. Nazywa się
ngModule
. Oto jak będzie wyglądał Twój kod po użyciu:
<!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">
[b]Module A, B[/b]>
<div ng-controller="MyControllerA">
{{name}}

<div ng-controller="MyControllerB">
{{name}}

<div ng-module="MyModuleB">
[b]Just Module B[/b]>
<div ng-controller="MyControllerB">
{{name}}


</body>
</html>

Możesz pobrać kod źródłowy pod adresem:
http://www.simplygoodcode.com/ ... odule
http://www.simplygoodcode.com/ ... dule/
/
Zasadniczo jest to ten sam kod używany wewnętrznie przez AngularJS bez ograniczeń.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Dlaczego chcesz używać wielu [ng-app]? Ponieważ Angular wznawia z modułami, możesz użyć aplikacji, która używa wielu zależności.

Javascript

:
// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);angular.module('app', ['otherModule']).controller('AppController', function () {
// ...do something
});// getter syntax
angular.module('otherModule').controller('OtherController', function () {
// ...do something
});


HTML

:
<div ng-app="app">
<div ng-controller="AppController">...
<div ng-controller="OtherController">...


EDIT

Pamiętaj, że jeśli chcesz użyć kontrolera wewnątrz kontrolera, musisz użyć składni kontrolerAs, na przykład:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...

Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz pobrać wiele aplikacji kątowych, ale:
1) musisz je ręcznie pobrać
2) nie powinieneś używać „document” jako root, ale węzeł zawierający interfejs kątowy, tak aby:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);

To byłoby bezpieczne.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Podręcznik ładowania początkowego obu modułów będzie działał. Spójrz na to
<!-- IN HTML -->
<div id="dvFirst">
<div ng-controller="FirstController">
1: {{ desc }}
<div id="dvSecond">
<div ng-controller="SecondController ">
2: {{ desc }}
// IN SCRIPT
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');angular.element(document).ready(function() {
angular.bootstrap(dvFirst, ['firstApp']);
angular.bootstrap(dvSecond, ['secondApp']);
});

Oto link do tłoka

http://plnkr.co/edit/1SdZ4QpPf ... eview
http://plnkr.co/edit/1SdZ4QpPf ... eview

NOTE:

nie ma
ng-app
w html. Zamiast tego używany jest
id
.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Zrobiłem POC dla aplikacji Angular, używając wielu modułów i gniazd routera do zagnieżdżania zagnieżdżonych aplikacji w jednej aplikacji strony.
Możesz pobrać kod źródłowy pod adresem:

https://github.com/AhmedBahet/ng-sub-apps
https://github.com/AhmedBahet/ng-sub-apps
Mam nadzieję że to pomoże

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się