我想爲多個非常相似的視圖使用基礎AngularJS控制器，但我想更改傳遞到每個控制器的Resource。實例化並注入到AngularJS控制器中

這是基礎的控制器：

coreAppControllers.controller('ModalEditCtrl', 
    function ($scope, $stateParams, Resource, $state, $modalInstance) { 
     // A bunch of methods calling Resource 
    } 
);

現在我想在另一個控制器使用此控制器，但是使用Resource特定父控制器。

coreAppControllers.controller('MachinesEditCtrl', ['$modal', 
    function ($modal) { 

     $modal.open({ 
      backdrop: 'static', 
      keyboard: false, 
      templateUrl: '/partials/v1/resources/machines/edit', 
      controller: //ModalEditCtrl with specific Machine resource injected 
     }); 
    }] 
);

這在JavaScript中可能是錯誤的方法。在其他語言中，我會擴展一個基類，但我不確定那是一個原型語言。

SOLUTION

謝謝PSL的答案，但是，這種方法未能正確注射$modalInstance。最終的解決方案是使用resolve屬性，讓DI擔心其餘的問題。

出於某種原因，您必須在通過解析時將服務包裝在匿名函數中。

coreAppControllers.controller('MachinesEditCtrl', ['$modal', 'MachinesAPI', 
    function ($modal, MachinesAPI) { 
     $modal.open({ 
      backdrop: 'static', 
      keyboard: false, 
      templateUrl: '/partials/v1/resources/machines/edit', 
      controller: 'ModalEditCtrl', 
      resolve:  { 
       Resource: function() { 
        return MachinesAPI; 
       } 
      } 
     }); 
    } 
]);

來源

2014-09-01 BayssMekanique

如果您只想更改資源，那麼可以使用Dep注入參數。例如：'coreAppControllers.controller（'ModalEditCtrl1'，['$ scope'，'$ stateParams'，'DiffResource'，'$ state'，'$ modalInstance'，ctor]）;' – PSL 2014-09-01 23:56:09

另一種方法是使用'$ controller 'option http://plnkr.co/edit/E0xCJO?p=preview – PSL 2014-09-02 00:05:48

如果你通過路由器調用控制器，你可以在路由器本身使用'resolve'屬性：http：// stackoverflow。COM /問題/ 17716871 /如何到重用一個控制器功能於angularjs與 - 不同的變量爲基礎，路線上 – Jorg 2014-09-02 00:18:04

我覺得你的關心更多的是對的DI端，你可以很容易地做到這一點是這樣的： -

說這是你的控制器： -

function ModalEditCtrl($scope, $stateParams, Resource, $state, $modalInstance) { 
    // A bunch of methods calling Resource 
} 
app.controller('ModalEditCtrl',['$scope', '$stateParams', 'Resource', '$state', $modalInstance, ModalEditCtrl]);

只需註冊您的具體控制器以及： -

app.controller('ModalEditCtrlParent1',['$scope', '$stateParams', 'OtherResource', '$state', $modalInstance, ModalEditCtrl]); 

app.controller('ModalEditCtrlParent2',['$scope', '$stateParams', 'SomeOtherResource', '$state', $modalInstance, ModalEditCtrl]);

並在你的模態只是做： -

$modal.open({ 
     backdrop: 'static', 
     keyboard: false, 
     templateUrl: '/partials/v1/resources/machines/edit', 
     controller: 'ModalEditCtrlParent1' 
    });

這樣你保持你的控制器遵循OCP任何新的觀點，你只需要添加一個新的，而不是修改現有的。

下面是一個使用$controller服務來獲得一個控制器根據您提供的相關性的情況下的另一種方式，你可以做到這一點： -

coreAppControllers.controller('MachinesEditCtrl', ['$modal', 'Resource2' function ($modal, Resource) { 
     var viewModel = $scope.$new(true); 
     $modal.open({ 
      backdrop: 'static', 
      keyboard: false, 
      scope: viewModel, 
      templateUrl: '/partials/v1/resources/machines/edit', 
      controller: function(){ 
       return $controller('ModalEditCtrl', {$scope:viewModel, Resource:Resource}); 
      } 
     }); 
    }] 
);

Demo

而且也可以使用任何syntactic sugar for prototypical inheritance（我使用typescript so i generally do extends），但它取決於你想要擴展什麼？是作用域（$ scope）還是控制器（控制器As）本身（您基本上都會擴展視圖模型）。

來源

2014-09-02 00:29:30 PSL

實例化並注入到AngularJS控制器中

SOLUTION

回答

相關問題