WebHU - Programozási kérdések és válaszok

Injektálja be a változókat az ng-init segítségével a vezérlőbe

Ugyanazokat a változókat, különböző értékű változókat szeretném többszörösen beadni ugyanahhoz a vezérlőhöz. Ezt próbáltam. Hogyan lehet különböző értékeket kapni az egyes hívásokban?

HTML

<body ng-app="myApp">
    <div ng-controller="myCtrl" ng-init="test='helloworld';test1='helloworld2'">

    </div>
    <div ng-controller="myCtrl" ng-init="test='helloworld3';test1='helloworld4'">

    </div>
    <div ng-controller="myCtrl" ng-init="test='helloworld5';test1='helloworld6'">

    </div>
<body>

JavaScript kód

var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope",function($scope) {
    console.log($scope.test);
    console.log($scope.test1);
}]);

  • Úgy tűnik, hogy átírtad a test és test1 változók értékét különböző értékekkel (helloworld, helloworld2, ...). Ha ugyanabban a vezérlőben szeretné őket tárolni, mi legyen ezeknek a változóknak a végső értéke? 22.10.2015
  • az értékek kikerültek a kezemből. ezek az ismétlődő AEM komponensek következményei. szóval többször megismétlődik 22.10.2015
  • Ez ugyanazon vezérlő három különböző példányán működhet, mindegyik saját hatókörrel. Ez az amit akarsz? 22.10.2015
  • igen, erre van szükségem.@RobertoLinares Találtam egy piszkos megoldást. Mondjon egy jobb módszert 22.10.2015

Válaszok:


1

ng-init A Dokumentumok ezt mondja:

Ezzel az irányelvvel vissza lehet élni, hogy szükségtelen mennyiségű logikát adjunk a sablonokhoz. Az ngInitnek csak néhány megfelelő felhasználása létezik, például az ngRepeat speciális tulajdonságainak álnevezése, amint az az alábbi bemutatón látható; és adatok beszúrásához szerveroldali szkripteken keresztül. Ezen néhány eseten kívül az ngInit helyett vezérlőket kell használnia az értékek inicializálásához egy hatókörön.

Nem szabad init értékeket hozzárendelni a ng-init használatával. A helyes módja ennek az lenne, ha az AngularJS controller függvény végén hozzárendelik.

Technikailag az történik, hogy a ng-init direktíva az ng-controller függvény regisztrálása után kerül kiértékelésre. Ez az oka annak, hogy a ng-init inicializált értékei nem érhetők el a vezérlőn belül.

Alapvetően a ng-controller első hívás oka a prioritás. Ha megnézi a priority direktívát, a ng-init direktíva 450 és priority direktívával rendelkezik, ahol a ng-controller direktíva 500, miközben a direktívát a DOM-ból fordítja AngularJS prioritások szerint rendezi őket. Így a ng-controller kerül végrehajtásra először.

Kód

var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope",function($scope) {
    console.log(test);
    console.log(test1);

    // If you wanted to assign the values dynamically you could make Ajax here
    // that would call the server-side method which will return the values
    // and in success that Ajax you could set those scope values.
    // If any dependent function should get called after assigning them.
    // Then you can call that function from that Ajax success.
    $http.get('/getDefaultValues').then(function(response){
        var data = response.data;
        $scope.test= data.value1;
        $scope.test1 = data.value2;
    });
}]);

Szerkesztés

Mint úgy tűnik, a fenti kódot nem lehet megtenni, mert a változóértékek hozzárendelése a jsp/aspx oldalról történik. Emiatt egy másik módszert javaslok ennek elérésére. Szerintem ez tisztább módja ennek.

Azt javaslom, hogy lustán inicializálja a szögletes alkalmazást a angular.bootstrap használatával, nem pedig a ng-app használatával, amely az alkalmazást az oldal betöltésekor azonnal inicializálja.

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Most azon fog gondolkodni, hogyan lehetne megoldani azt a problémát, hogy a változót a hatókörhöz rendeljük a vezérlő elérhetővé tétele előtt, ebben az esetben létrehozhat egy értékobjektumot, és hozzárendelheti a jsp/aspx oldalon feltöltő változóhoz a value (szolgáltatás típusa) )

<script type="text/javascript">
    angular.element(document).ready(function() {
      //like below you could get value inside your app by assigning
      //to some angular component like constant/value
      angular.module('TodoApp').value('sharedData', {
          'test': @myValueFromAspxPage,
          'test1': @myValueFromAspxPage1
      });
      angular.bootstrap(document, ['TodoApp']);
    });
</script>

A fentiek elvégzésével könnyen elérhetővé teheti értékeit egy vezérlőn belül, és akkor nem kell várnia, amíg egy feldolgozási ciklus befejeződik a $timeout használatával. Ezeket az értékeket a sharedData értékbe injektálhatja úgy, hogy beadja a vezérlőbe.

22.10.2015
  • test='helloworld',test1='helloworld2 ezeket az értékeket dinamikusan generálja, sőt a vezérlő is dinamikusan adja hozzá. szóval hogyan passzoljam át 22.10.2015
  • A vezérlők ismétlődnek, ha ezt teszem. js külön íródik, és háromszor adják hozzá az összetevőket, amelyeknek ez a kódja van.<div ng-controller="myCtrl" ng-init="test='helloworld';test1='helloworld2'"> </div>. Az nginit értékek innen származnak: jsp 22.10.2015
  • @SusheelSingh hogyan jelennek meg ezek az értékek az oldalon... Azt javaslom, hogy indítson egy $http hívást egy vezérlőről, és rendelje hozzá ezeket az értékeket közvetlenül magából a szögvezérlőből. 22.10.2015
  • Nem vagyok biztos ebben a részben. Ezt tovább kell ásni. 22.10.2015
  • @SusheelSingh meg tudnád nézni a szerkesztésemet, kérlek..Ha nem érted, amit mondok...Segíthetek ebben.. 22.10.2015
  • Visszatérek hozzád, ha kipróbálom az utat. 22.10.2015
  • @SusheelSingh biztosan.. Kérdezz bátran .. Jó kódolást :) 22.10.2015
  • @SusheelSingh nézd meg a frissített választ.. hogy még tisztább módon érd el 28.10.2015
  • szóval háromszor kell lefuttatnom ezt a szkriptet, mert 3 komponenst különböző értékekkel kell használni. a script háromszor fut, igaz? 29.10.2015
  • Mindhárom értéket dinamikusan be tudom tölteni, és ugyanaz az oldal. mindhárom összetevő. ha külön oldalon lenne, akkor a szerveroldali értékek változóiból példányosítottam volna, és a vezérlőben használtam volna. De az esetem más, mindhárom érték ugyanazon az oldalon van. w 29.10.2015
  • @SusheelSingh akkor miért nem működik a fenti megoldás? 29.10.2015
  • 'test': @myValueFromAspxPage, 'test1': @myValueFromAspxPage1 ezt az értéket szeretné dinamikusan helyesen feltölteni. ha ez a helyzet, akkor az egyik összetevőnél fog működni. Van még két azonos szerkezetű alkatrészem. tehát ha hozzáadok még egy komponenst a meglévő alá, akkor új dinamikus értékek lesznek beállítva, és az első értékek lecserélődnek 29.10.2015
  • elnézést, ha nem érted a forgatókönyvemet, az a adobe experience manager a java cms-hez kapcsolódik. Mindenesetre pozitívan értékelem az erőfeszítéseidet 29.10.2015
  • @SusheelSingh lehet, hogy nem tudod megtenni..Örülök, hogy segíthetek..Köszönöm :) 29.10.2015

  • 2

    Próbáld ki ezt... Ahogy @tymeJV rámutatott, pontosvesszővel kell elválasztani a változóneveket a HTML-ben. A $scope-t is használnia kell a vezérlő változóira való hivatkozáshoz.

    html

    <body ng-app="myApp">     
        <div ng-controller="myCtrl" ng-init="test='helloworld';test1='helloworld2'">
    
        </div>
        <div ng-controller="myCtrl" ng-init="test='helloworld3';test1='helloworld4'">
    
        </div>
        <div ng-controller="myCtrl" ng-init="test='helloworld5';test1='helloworld6'">
    
        </div>
    <body>
    

    javascript

    var app = angular.module("myApp", []);
    
    app.controller("myCtrl", ["$scope",function($scope) {
        console.log($scope.test);
        console.log($scope.test1);
    }]);
    
    22.10.2015

    3

    Talált egy piszkos megoldást. Köszönöm mindenkinek a hozzászólásait.

    Demó

    var app = angular.module("myApp", []);
    
    app.controller("myCtrl", ["$scope", '$timeout',function($scope, $timeout) {
        $timeout(function(){ 
            console.log($scope.test);
            console.log($scope.test1);  
        }, 1);
    }]);
    
    22.10.2015
  • kérem, merjen megjegyzést tenni a leszavazás helyett, ez a megoldás, ami működik számomra 22.10.2015
  • Nem szabad ilyen rosszat csinálni.. A setTimeout nem erre való. A ng-init használata helytelen dolog. Előbb ezt kell elolvasnod. Olvasd el itt docs.angularjs.org/api/ng/directive/ngInit .. 22.10.2015
  • @PankajParkar: a helytelen helyzettől függ. Ha van egy szerveroldali változója (ASP, PHP), amelyet át kell adnia a js-vezérlőnek, ez a megfelelő módja annak... 28.10.2015
  • @Serge Nem túl igaz.. Több más módja is van rá 28.10.2015
  • Új anyagok

    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..