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.
2021-03-02 Dodaj komentarz
Udostępnij to

Nie znaleziono powiązanych wyników

    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ż
    2021-03-02 0 0
    Udostępnij to
    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ń.
    2021-03-02 0 0
    Udostępnij to
    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">...
    2021-03-02 0 0
    Udostępnij to
    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.
    2021-03-02 0 0
    Udostępnij to
    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
    .
    2021-03-02 0 0
    Udostępnij to
    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
    2021-03-02 0 0
    Udostępnij to
    Dlaczego jest złożony? 0 odpowiedzi zostało zwiniętych

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

    Polityka prywatności: https://zweryfikowac.pl/Polityka-prywatnosci.pdf
    Copyright © 2023, All Rights Reserved