Làm cách nào để sử dụng lại một bộ điều khiển cho 2 chế độ xem khác nhau?

Question

Tôi đã xác định một bộ điều khiển và áp dụng cho 2 chế độ xem có sự khác biệt nhỏ.

đang kiễu góc:

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); 
}); 

Xem 1:

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

View 2:

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

Mẫu mã rất đơn giản, nhưng có rất nhiều mã và logic trong dự án thực sự của tôi.

Chế độ xem 1 và 2 có hầu hết các tính năng giống nhau, chỉ với một vài khác biệt, nhưng tôi cần phải viết một số mã cho mỗi bộ điều khiển trong bộ điều khiển.

Tôi không muốn tạo 2 bộ điều khiển khác nhau cho chúng, vì chúng có hầu hết cùng một logic. Tôi không muốn chuyển logic sang một dịch vụ để chia sẻ nó giữa 2 bộ điều khiển, bởi vì logic không phải là phổ biến để trở thành một dịch vụ.

Có cách nào khác để làm điều đó không?

Answer 1

Theo các điều kiện cho tôi có thể làm một cái gì đó giống như

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')]); 

Sau đó

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

và

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

Answer 2

Tôi không biết cụ thể thiết lập của bạn, nhưng 2 của bạn bộ điều khiển có thể kế thừa từ một tổ tiên chung.

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 
}; 

Answer 3

Tôi cũng gặp vấn đề tương tự và kế thừa phạm vi đã giải quyết được sự cố của mình. Tôi muốn "tái sử dụng" bộ điều khiển để thừa hưởng trạng thái/mô hình (phạm vi $) và chức năng (các chức năng điều khiển gắn với phạm vi $) Như được mô tả trong "Scope Inheritance Example" Tôi đính kèm bộ điều khiển cha vào phần tử DOM bên ngoài và bộ điều khiển con bên trong . Phạm vi và chức năng của bộ điều khiển cha mẹ "hợp nhất" liền mạch vào con một.

Answer 4

Đây là một tùy chọn khác. Chút thay đổi từ this blog post

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

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

here is a plunker