Конструктор контроллера AngularJS и создание экземпляра с аргументами

Question

Возможно ли создать экземпляр контроллера в AngularJS и передать аргументы его конструктору, как в ООП? Я не могу понять, как рефакторировать 3 идентичных контроллера с переменными имен и содержимого, которые меняются ...

Thanx.

Answer 1

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

Представьте у вас есть код, который выглядит как этот

angular.module('myapp').controller('TableACtrl', ['$scope', function($scope) { 
    $scope.data = // get the data from some source 
    $scope.someFunction = function() { ... }; 
    $scope.someOtherFunction = function() { ... }; 
}]); 

angular.module('myapp').controller('TableBCtrl', ['$scope', function($scope) { 
    $scope.data = // get the data from some other source 
    $scope.someFunction = function() { ... }; 
    $scope.someOtherFunction = function() { ... }; 
}]); 

Это выглядит примерно так:

var tableCtrl = function($scope, dataSource) { 
    $scope.data = dataSource.getData(); 
    $scope.someFunction = function() { ... }; 
    $scope.someOtherFunction = function() { ... }; 
}; 

angular.module('myapp') 
    .controller('TableACtrl', ['$scope', 'dataSourceA', tableCtrl]) 
    .controller('TableBCtrl', ['$scope', 'dataSourceB', tableCtrl]) 

angular.module('myapp') 
    .service('dataSourceA', function() { 
     return { 
      getData: function() { ... } 
     }; 
    }); 
angular.module('myapp') 
    .service('dataSourceB', function() { 
     return { 
      getData: function() { ... } 
     }; 
    }); 

Я бы по-прежнему помещал вещи в модуль, поэтому вы не загрязняете глобальное окно. Но это другая проблема.

Answer 2

Если у вас есть 3 отдельных раздела на странице, которые имеют очень похожий код контроллера, похоже, что вы должны использовать директиву. Даже если вам не нужно напрямую управлять DOM (что является классической причиной использования директивы), и для этого нужны только стандартные привязки данных с угловыми данными, тогда это хороший способ повторного использования контроллеров в разных контекстах с помощью атрибутов, установленных на директивы.

Вы можете увидеть рабочую plunkr в

http://plnkr.co/edit/qclp6MOxGWP7Ughod4T8?p=preview

Но ключевым моментом является то директивы могут связывать-переменные в контроллере своего родительского осциллографа. Скажем, в родительской области у вас есть 3 переменные, так:

$scope.myVariable1 = 'Value 1'; 
$scope.myVariable2 = 'Value 2'; 
$scope.myVariable3 = 'Value 3'; 

Затем вы можете установить 3 экземпляра директивы в шаблоне:

<my-directive my-param="myVariable1"></my-directive> 
<my-directive my-param="myVariable2"></my-directive> 
<my-directive my-param="myVariable3"></my-directive> 

Тогда каждая директива может использовать переменную в ' мои-пары «атрибут

scope: { 
    'myParam':'=' 
} 

„=“означает, что в рамках директивы у вас есть переменные, которая называется„MyParam“, что равно (+ обязаны) переменный, указанные в» my- атрибут param е директива. Так на шаблоне директивы, вы можете использовать:

<div>Value of parameter: {{myParam}}</div> 

И в контроллере директивы, вы имеете доступ к как:

$scope.myParam 

И тогда должны быть в состоянии настроить его поведение основанный на myParam этого экземпляра.