繼承或共享指令控制器

Question

我有兩個指令：A和B.它們非常相似。我希望指令B繼承指令A中的控制器。

換句話說，用於A的指令定義對象中的controller:的相同函數也需要是B的指令定義對象中使用的controller:函數。

除了複製/粘貼controller:函數，我如何在A和B的定義中使用相同的函數？

Answer 1

如果我理解正確，你並不是真的想要繼承控制器。你想在兩個不同的指令中使用一個控制器。 如果是這種情況，只需聲明控制器函數，並將其作爲函數或字符串傳遞給兩個指令定義對象。

Answer 2

控制器都只是普通的JS功能，所以，你可以使用原型：

function BaseController(){ 
    this.commonFunct = function(){ 
     ... 
    } 
} 

function CtrlA(){ 
} 
CtrlA.prototype = BaseController 

function CtrlB(){ 
} 
CtrlB.prototype = BaseController 

這一點也適用controllerAs語法，當你的控制器會在一些名暴露範圍，說ctrl。然後$scope.ctrl.commonFunct（更通用的，可以從控制器的任何地方運行）或this.commonFunct（可以在控制器的實例方法中使用，其中this是控制器本身）可用於引用該功能。

如果您將一個模塊中的兩個控制器都聲明爲命名函數，那麼這起作用。如果他們在不同的模塊中聲明，你可以使用混入樣的方式與$controller：

// Base module 
(function() { 
    'use strict'; 

    angular.module('Base', []); 

    function BaseController($scope, <injectables>, that) { 
    that.commonFunct = function() { 
    }; 
    } 

    angular.module('Base').controller('BaseController', 
    ['$scope', '...', BaseController]); 
})(); 

// Module that inherits functionality 
(function() { 
    'use strict'; 

    angular.module('Derived', ['Base']); 

    function DerivedController($scope, $controller, ...) { 
    $controller('BaseController', { 
     '$scope' : $scope, 
     ... 
     'that' : this 
    }); 

    // this.commonFunct is available 
    } 

    angular.module('Derived').controller('DerivedController', 
    ['$scope', '$controller', '...', DerivedController]); 
})(); 

MHO：我建議使用命名的函數宣告控制器/服務和指令，因爲它是更自然，這樣做的JS方法的東西。另外，我喜歡controllerAs語法，因爲它有助於區分直接存儲在作用域中的數據（如$scope.data）與控制器的方法（它們都存儲在一個作用域的命名對象中，如$scope.ctrl）。