AngularJS - 控制器繼承

我使用角度路由，我有一種情況，其中兩個視圖基本上操縱相同的數據。現在，數據通過工廠提供給兩個控制器。但是，功能完全相同。AngularJS - 控制器繼承

我不會去太多的細節，但創建一個服務或工廠（在這種情況下，一般建議）並沒有解決我的問題，因爲按鈕點擊等基本上都是在這兩種觀點是相同的。我仍然必須定義相同的按鈕點擊兩次，除了邏輯將在工廠。我的兩個意見唯一的區別是，view2有幾個功能比view1更多，否則它基本上是相同的。

我現在需要的是某種控制器繼承。我找到了幾個解決方案，但我仍在尋找一個最佳和正確的解決方案。我用angular.extend來克隆範圍，但我不確定這是否是正確的方法。

此外，$scope從view1發生什麼？當它被克隆到$scopeview2？它是否被覆蓋？

這裏有一個簡單的例子：http://jsbin.com/fiqeha/1/edit?html,js,output

來源

2014-12-19 uglycode

你不能使用這兩種觀點相同的控制器？否則，你會麻煩注入服務/工廠到兩個控制器。 –

可以通過聲明基本爲廠家和使用$注射器例如它們注入到你的控制器實現控制器繼承

angular.module('app').factory('BaseController', function() { 

    var controller= function($scope){ 

    $scope.value = 0; 

    $scope.testFunction = function() { 
     $scope.value++; 
    }; 

    $scope.overrideFunction = function() { 
     $scope.value--; 
    } 
    } 

    return controller; 
});

，並在子控制器，

angular.module('app').controller('ChildController', function ($scope, 
    $injector, BaseController) { 

    //Inherit base controller - first line in controller 
    $injector.invoke(BaseController, this, {$scope: $scope}); 

    $scope.overrideFunction = function() { 
    //call base function 
    $scope.value = $scope.testFunction() + 2; 
    }; 

});

來源

2014-12-19 21:59:44 Johnny

爲什麼不使用相同的控制器？你會得到兩個獨立的控制器實例，這應該是你想要的。

這是fork of your jsbin。

JS：

angular.module('app', []). 
controller('ctrl1', ['$scope', function($scope){ 

    $scope.name = "John"; 

    $scope.displayName = function(){ 
     alert($scope.name); 
    }; 

    $scope.getNameLength = function(){ 
     alert($scope.name.length); 
    }; 

}]);

HTML：

<body> 
    <b>view1.html</b> 
    <div ng-controller="ctrl1"> 
     <input ng-model="name" /> 
     <button ng-click="displayName()">Display</button> 
    </div> 
    <br /> 
    <br /> 
    <b>view2.html</b> 
    <div ng-controller="ctrl1"> 
     <input ng-model="name" /> 
     <button ng-click="displayName()">Display</button> 
     <button ng-click="getNameLength()">Length</button> 
    </div> 
</body>

來源

2014-12-19 12:59:31

是的，這也是我最初的解決方案，但後來變得非常混亂，因爲view2至少有五種特定的方法。而且也不需要包含view1。我的例子錯了嗎？ – uglycode

它是你，但有5個額外的方法將是一個令人信服的理由嘗試某種形式的繼承。可以製作2個不同的控制器並複製一些方法（將複雜的邏輯移動到服務），或者擁有2個相同的控制器。 –

謝謝你的迴應。我仍在努力理解爲什麼原始帖子中的例子可能不是一個好的解決方案，或者如果我通過從一個控制器複製範圍來打破任何角度規則？ – uglycode

AngularJS - 控制器繼承

回答

相關問題