Pasarea dinamica a controllerelor catre o directiva angularjs

Post Title

       AngularJS ne simplifica viata? Cel putin in astfel de cazuri sigur da, si sunt sigur ca si voi ati avut nevoie de cod pentru un astfel de concept: "Pasarea unui controller catre o directiva, in cazul x primeste controllerul z iar in alt caz primeste y"

  1.  
  2.  
  3. 'use strict';
  4.  
  5. var mp = angular.module('mpApp',[]);
  6.  
  7. mp.directive('testDir',function(){
  8. return {
  9. restrict:'E',
  10. replace: true,
  11. name:'ctrl',
  12. scope:{},
  13. template:'<div><button ng-click="getController()">Get Controller</button></div>',
  14. controller:'@',
  15. };
  16. });
  17.  
  18. mp.controller('Primul',function($scope) {
  19.  
  20. $scope.getController = function getController() {
  21. alert('Primul Controller');
  22. }
  23.  
  24. });
  25.  
  26. mp.controller('AlDoilea',function($scope) {
  27.  
  28. $scope.getController = function getController() {
  29. alert('Al doilea Controller');
  30. }
  31. });

 

  1.  
  2. <head>
  3. <title>Test Controller dinamic</title>
  4. </head>
  5. <body ng-app="mpApp">
  6. <test-dir ctrl="Primul"></test-dir>
  7. <test-dir ctrl="AlDoilea"></test-dir>
  8. </body>
  9. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  10. <script src="mpApp.js"></script>
  11. </html>

 

Daca nu stiti ce este acel "@" atunci o sa va explic, substituie valoare unui atribut in cazul nostru "ctrl" , cu alte cuvinte este ca si cum ati declara un obiect de accest tip:

  1.  
  2. return {
  3. restrict:'E',
  4. replace: true,
  5. scope:{},
  6. template:'<div><button ng-click="getController()">Get Controller</button></div>',
  7. controller:'Primul',
  8. };

 

Este un truc interesant si isi face treaba, deci AngulaJS este awesome. 

Daca nu stiti nimic despre izolarea scopurilor in directive AngularJS va recomand exemplul :

https://docs.angularjs.org/examples/example-example23/index.html

Si documentatia : 

https://docs.angularjs.org/guide/directive

 

Daca sunt intrebari va rog sa comentati sau sa folositi forumul

 

Autor articol

Ştiinţa fără religie este şchioapă, religia fără ştiinţă este oarbă (Albert Einstein)

Structura de aplicatie Angular.js
 

Acest articol nu este comentat, fii primul care o face

Trebuie sa fii logat sa poti lasa un comentariu Autentificare Inregistrare Logare cu Facebook
top