angularjs condivide la configurazione dei dati tra i controller

Mi chiedo quale potrebbe essere un buon modo per condividere la direttiva tra controller. Ho cioè due direttive da utilizzare in controller diversi con configurazioni diverse, il primo pensa che ho pensato di usare come:

//html  
//js .controller('MainCtrl', function ($scope,$upload) { /*File upload config*/ $scope.onFileSelect = function($files) { for (var i = 0; i < $files.length; i++) { var file = $files[i]; $scope.upload = $upload.upload({ url: 'server/upload/url', method: 'POST', data: {myObj: $scope.myModelObj}, file: file, }).progress(function(evt) { console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).success(function(data, status, headers, config) { console.log(data); }); } }; /* Datepicker config */ $scope.showWeeks = true; $scope.minDate = new Date(); $scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; }; $scope.dateOptions = { 'year-format': "'yy'", 'starting-day': 1 }; $scope.format = 'MMM d, yyyy'; }) .controller('IndexCtrl', function ($scope) { })

così facendo posso usare tutte le funzioni del mio controller per bambini, ma non mi piace molto a causa di problemi di collisione. Dato che non puoi usare un servizio (non puoi usare $ scope in un servizio) le altre alternative potrebbero essere un’altra direttiva o inserire il codice in un blocco di esecuzione ma è lo stesso usando un controller genitore quindi cosa ne pensi ?

AGGIORNARE

cosa ne pensi di questo approccio?

 //outside of angular stauff function MyTest(){ this.testScope = function(){ console.log('It works'); } } //inside a controller $scope.ns = new MyTest(); //in the view 

ppp

RIUPDATE questa sembra l’opzione migliore 🙂

 MyTest.call($scope); 

Considera il metodo descritto da questo post: Estendere i controller AngularJS usando il pattern Mixin

Invece di copiare i tuoi metodi fuori da un servizio, crea un controller di base che contenga quei metodi, quindi chiama estensioni sui controller derivati ​​per combinarli. L’esempio del post:

 function AnimalController($scope, vocalization, color, runSpeed) { var _this = this; // Mixin instance properties. this.vocalization = vocalization; this.runSpeed = runSpeed; // Mixin instance methods. this.vocalize = function () { console.log(this.vocalization); }; // Mixin scope properties. $scope.color = color; // Mixin scope methods. $scope.run = function(){ console.log("run speed: " + _this.runSpeed ); }; } 

Ora possiamo mixare AnimalController in DogController:

 function DogController($scope) { var _this = this; // Mixin Animal functionality into Dog. angular.extend(this, new AnimalController($scope, 'BARK BARK!', 'solid black', '35mph')); $scope.bark = function () { _this.vocalize(); // inherited from mixin. } } 

E poi usa DogController nel nostro modello:

 

Dog

I controller in questo esempio sono tutti nello spazio globale e sono inclusi nel markup come segue.

       

Non l’ho provato, ma non vedo perché il seguente non avrebbe funzionato:

 var myApp = angular.module('myApp', []) .controller('AnimalController', ['$scope', 'vocalization', 'color', 'runSpeed', function ($scope, vocalization, color, runSpeed) { /* controller code here */}]); .controller('DogController', ['$scope', '$controller', function($scope, $controller) { var _this = this; // Mixin Animal functionality into Dog. angular.extend(this, $controller('AnimalController', { $scope: scope, vocalization: 'BARK BARK!', color: 'solid black', runSpeed:'35mph' })); $scope.bark = function () { _this.vocalize(); // inherited from mixin. } }]); 

consultare: documenti per il servizio $ controller

Quello che vuoi è terribile.

Non vorreste che i vostri controllori sapessero qualcosa l’uno dell’altro, per non parlare di uno che ha accesso alla funzione dell’altro. Puoi semplicemente usare un servizio per farlo. Per quanto riguarda l’utilizzo di direttive, non sono sicuro di cosa esattamente si vuole accadere.

Per quanto riguarda la tua seconda cosa, puoi farlo facilmente

 .service('MyTestService', function(){ return { testScope: function(){ console.log('It works'); } }; }) .controller('MyController', ['$scope', 'MyTestService', function($scope, MyTestService){ $scope.testScope = MyTestService.testScope; }]) 

e secondo te

 

ppp

Ho finito con:

 //service .service('PostUploader',function($upload){ var that = this; var fileReaderSupported = window.FileReader !== null; this.notify = null; this.success = null; this.showAlert = false; this.avatar = ''; this.onFileSelect = function($files) { var $file = $files[0]; var filename = $file.name; this.avatar = filename; var isImage = /\.(jpeg|jpg|gif|png)$/i.test(filename); if(!isImage){ this.showAlert = true; return; } this.showAlert = false; if (fileReaderSupported && $file.type.indexOf('image') > -1) { var fileReader = new FileReader(); fileReader.readAsDataURL($file); fileReader.onload = that.notify; } $upload.upload({ url :'/api/post/upload', method: 'POST', headers: {'x-ng-file-upload': 'nodeblog'}, data :null, file: $file, fileFormDataName: 'avatar' }) .success(that.success) .progress(function(evt) { }) .error(function(data, status, headers, config) { throw new Error('Upload error status: '+status); }) }; this.closeAlert = function() { this.showAlert = false; }; }) //controller /* Uploader post */ $scope.dataUrl = null; $scope.avatar = PostUploader.avatar; $scope.showAlert = PostUploader.showAlert; $scope.onFileSelect = PostUploader.onFileSelect; $scope.closeAlert = PostUploader.closeAlert; PostUploader.notify = function(e){ $timeout(function() { $scope.dataUrl = e.target.result; }); }; PostUploader.success = function(data, status, headers, config) { $timeout(function() { $scope.post.avatar = data.url; }); } $scope.$watch('avatar',function(newVal, oldVal){ if(newVal) { $scope.avatar = newVal; } }); $scope.$watch('showAlert',function(newVal, oldVal){ $scope.showAlert = newVal; $scope.dataUrl = null; }); 

L’ho fatto perché devo fare la stessa cosa nel creare post e modificare post, ma tutto sumto ho lo stesso codice ripetuto! 🙂

L’unica cosa buona è che il codice ha meno logica.

soluzione ovvia ma brillante (può essere)

 (function(window, angular, undefined) { 'use strict'; angular.module('ctrl.parent', []) .run(function ($rootScope) { $rootScope.test = 'My test' $rootScope.myTest = function(){ alert('It works'); } }); })(window, angular); angular.module('app',['ctrl.parent']) .controller('ChildCtrl', function($scope){ }); 

È facile e pulito e non vede alcun inconveniente (non è globale)

AGGIORNARE

 'use strict'; (function(window, angular, undefined) { 'use strict'; angular.module('ctrl.parent', []) .controller('ParentController',function (scope) { scope.vocalization = ''; scope.vocalize = function () { console.log(scope.vocalization); }; }); })(window, angular); angular.module('app',['ctrl.parent']) .controller('ChildCtrl', function($scope,$controller){ angular.extend($scope, new $controller('ParentController', {scope:$scope})); $scope.vocalization = 'CIP CIP'; }); 

solo un po ‘più ordinato e funziona CIP CIP 🙂