Как повторно использовать один контроллер для двух разных видов?

Я определил один контроллер и применил его к двум представлениям с небольшими отличиями.

Angular код:

app.controller('MyCtrl', function($scope) {
   $scope.canSave = false;
   $scope.demo = {
      files : [{
         filename: 'aaa.html',
         source: '<div>aaa</div>'
      }, {
         filename: 'bbb.html',
         source: '<div>bbb</div>'
      }]
   }
   $scope.newFile = function(file) {
       $scope.demo.files.push(file);
   }
   $scope.$watch("demo.files", function(val) {
       $scope.canSave = true;
   }, true);
});

Просмотр 1:

<div ng-controller="MyCtrl"></div>

Вид 2:

<div ng-controller="MyCtrl"></div>

Пример кода очень прост, но в моем реальном проекте есть много кода и логики.

В представлениях 1 и 2 есть почти те же функции, только с несколькими отличиями, но мне нужно написать код для каждого из них в контроллере.

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

Есть ли другой способ сделать это?

Ответ 1

В данных условиях я мог бы делать что-то вроде

function MyCommonCtrl(type){
    return function($scope, $http) {
        $scope.x = 5;

        if(type = 't1'){
            $scope.domore = function(){
            }
        }

        ....
        ....
    }
}

angular.module('ng').controller('Type1Ctrl', ['$scope', '$http', MyCommonCtrl('t1')]);
angular.module('ng').controller('Type2Ctrl', ['$scope', '$http', MyCommonCtrl('t2')]);

Тогда

<div ng-controller="Type1Ctrl"></div>

<div ng-controller="Type2Ctrl"></div>

Ответ 2

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

Type1Ctrl.prototype = new MyCtrl();
Type1Ctrl.prototype.constructor = Type1Ctrl;

function Type1Ctrl() {
  // constructor stuff goes here
}

Type1Ctrl.prototype.setScope = function() {
  // setScope
};

Type2Ctrl.prototype = new MyCtrl();
Type2Ctrl.prototype.constructor = Type2Ctrl;

function Type2Ctrl() {
  // constructor stuff goes here
}

Type2Ctrl.prototype.setScope = function() {
  // setScope
};

Ответ 3

Я также столкнулся с аналогичной проблемой, и наследование наследования решило мою проблему. Я хотел "повторно использовать" контроллер для наследования общего состояния/модели ($ scope) и функциональности (функции контроллера, привязанные к $scope) Как описано в "Пример наследования видимости области видимости" , я прикрепляю родительский контроллер к внешнему элементу DOM и дочернему контроллеру во внутреннее. Масштаб и функции родительского контроллера "сливаются" без проблем в дочерний.

Ответ 4

Вот еще один вариант. Немного изменен из этот пост в блоге

app.factory('ParentCtrl',function(){
    $scope.parentVar = 'I am from the parent'
  };
});

app.controller('ChildCtrl', function($scope, $injector, ParentCtrl) {
  $injector.invoke(ParentCtrl, this, {$scope: $scope});
});

вот плункер