Избегайте повторения в Угловом контроллере

Question

Я угловатый новичок, и я пишу приложение для ионического звука. Я закончил свое приложение и пытаюсь реорганизовать мой контроллер, избегая повторения кода.

У меня есть этот кусок кода, который управляет моей модальностью:

angular.module('starter') 
    .controller('NewsCtrl', function($scope, content, $cordovaSocialSharing, $timeout, $sce, $ionicModal){ 
    $scope.news = content; 

    content.getList('comments').then(function (comments) { 
     $scope.comments = comments; 
    }); 

    $scope.addComment = function() { 

    }; 

    $scope.shareAnywhere = function() { 
     $cordovaSocialSharing.share("Guarda questo articolo pubblicato da DDay", "Ti stanno segnalando questo articolo", content.thumbnail, "http://blog.nraboy.com"); 
    }; 

    $ionicModal.fromTemplateUrl('templates/comments.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.modal = modal; 
    }); 

    $scope.showComment = function() { 
     $scope.modal.show(); 
    }; 

    // Triggered in the login modal to close it 
    $scope.closeComment = function() { 
     $scope.modal.hide(); 
    }; 

    $scope.$on('modal.shown', function() { 
     var footerBar; 
     var scroller; 
     var txtInput; 

     $timeout(function() { 
     footerBar = document.body.querySelector('#commentView .bar-footer'); 
     scroller = document.body.querySelector('#commentView .scroll-content'); 
     txtInput = angular.element(footerBar.querySelector('textarea')); 
     }, 0); 

     $scope.$on('taResize', function(e, ta) {   
     if (!ta) return; 
     var taHeight = ta[0].offsetHeight;   
     if (!footerBar) return; 
     var newFooterHeight = taHeight + 10; 
     newFooterHeight = (newFooterHeight > 44) ? newFooterHeight : 44; 

     footerBar.style.height = newFooterHeight + 'px'; 
     scroller.style.bottom = newFooterHeight + 'px'; 
     }); 

    }); 

    }); 

я добавил этот же код в 6 контроллеров. Есть ли способ избежать повторения?

Answer 1

Возможно, что вы ищете, это угловое обслуживание. Этот компонент представляет собой одноэлементный объект, который вы вводите в каждый контроллер, необходимый для выполнения этого кода.

Angular Services

С уважением,

Answer 2

Ниже приведен пример службы, я создал для извлечения данных адреса из файла JSON. Вот рабочий Plunk. http://plnkr.co/edit/RRPv2p4ryQgDEcFqRHHz?p=preview

angular.module('myApp') 
    .factory('addressService', addressService); 

    addressService.$inject = ['$q', '$timeout', '$http']; 

    function addressService($q, $timeout, $http) { 
    var addresses = []; 

    //console.log("Number of table entries is: " + orders.length); 

    var promise = $http.get('address.data.json'); 
    promise.then(function(response) { 
     addresses = response.data; 
     // console.log("Number of table entries is now: " + orders.length); 
    }); 

    return { 
     GetAddresses: getAddresses 
    }; 

    function getAddresses() { 

     return $q(function(resolve, reject) { 
     $timeout(function() { 
      resolve(addresses); 
     }, 2000); 

     }); 

    } 
    } 

Вот пример того, как я добавил зависимостей для него и другой службы на мой контроллер (Это не единственный способ сделать инъекции зависимостей, но это мой любимый способ, как это легче читать). Затем я позвонил в мой контроллер addressService.GetAddresses().

var app = angular.module('myApp', ['smart-table']); 

app.controller('TableController', TableController); 

TableController.$inject = [ "orderService", "addressService"]; 

function TableController(orderService, addressService) { 

addressService.GetAddresses() 
    .then(function(results) { 
     me.addresses = results; 
    // console.log(me.addresses.length + " addresses"); 
    }, 
    function(error) {}) 
    .finally(function() { 
    me.loadingAddresses = false; 
}); 
    });} 

Я также должен был включить свой тег .js в элемент сценария на моем index.html.

<script src="addressdata.service.js"></script>