web-dev-qa-db-ja.com

AngularJS：同じモジュールから別のコントローラー内にコントローラーを挿入

同じモジュールの一部である別のコントローラーにコントローラーを挿入することは可能ですか？

例：

var app = angular.module('myAppModule', [])
.controller('controllerOne', ['$scope', function($scope){
  $scope.helloWorld = function(){
    return 'Hello World';
  }
}])
.controller('controllerTwo', ['$scope', 'controllerOne', function($scope, controllerOne){
  console.log(controllerOne.helloWorld());
}])

ControllerOneで不明なプロバイダーを取得し続けます。同じモジュールに共存しているので、それがどのように可能かはわかりません。どんな助けでも大歓迎です。

javascriptangularjsdependency-injectionangularjs-scopeangularjs-controller
17
Joseph Freeman

あるコントローラーを別のコントローラーに注入できることを使用して、$controller依存関係を使用する必要があります

.controller('controllerTwo', ['$scope', '$controller', function($scope, $controller){
  $controller('controllerOne', {$scope: $scope})
  //inside scope you the controllerOne scope will available
}]);

しかし、データを共有するためにservice/factoryを好む

25
Pankaj Parkar

ロジックを「サービス」（工場/サービス/プロバイダー）に移動します。私は個人的に工場を好みます。他のオプションでthisなどを使用する代わりに、自分のオブジェクトを制御するのが好きです。

サービスを使用して、抽象化する機能を自分に与えますコントローラーからのビジネスロジックを作成し、そのロジックを再利用可能にします-！

var app = angular.module('myAppModule', [])

// typically people use the Word Service at the end of the name 
// even if it's a factory (it's all the same thing really...

.factory('sharedService', function () {

    var methods = {};

    methods.helloWorld = function () {
        return 'Hello World!';
    };

    // whatever methods/properties you have within this methods object
    // will be available to be called anywhere sharedService is injected.

    return methods;
})

通知sharedServiceが挿入されます

.controller('ControllerOne', ['$scope', 'sharedService', function($scope, sharedService) {
    $scope.helloWorld = sharedService.helloWorld();
}])

// Notice sharedService is injected here as well
.controller('ControllerTwo', ['$scope', 'sharedService', function($scope, sharedService){

    // Now we can access it here too!
    console.log( sharedService.helloWorld() );
}]);

サイドノート：コントローラーは、その重要性を示すために大文字にする必要があります！

サービスの力:)

3
Mark Pieszak - Trilon.io

ControllerTwoがcontrollerOneと同じ関数を呼び出す必要がある場合、それを処理するサービスを作成できます。 Angular Services -依存性注入を通じてプログラム全体でアクセス可能です。

var app = angular.module('myAppModule', [])
.controller('controllerOne', ['$scope', 'Hello', function($scope, Hello){
   console.log(Hello.helloWorld() + ' controller one');
}])
.controller('controllerTwo', ['$scope', 'Hello', function($scope, Hello){
   console.log(Hello.helloWorld() + ' controller two');
}])
.factory('Hello', [function() {
   var data = {
      'helloWorld': function() {
          return 'Hello World';
       }
   }

   return data;
}]);

お役に立てれば！

1
Matt Lemieux

別のコントローラーにコントローラーを挿入することはできません。serviceProviersのみがinjectableです。コントローラー1で不明なプロバイダーとしてエラーが発生する理由。

コントローラー間で共有される機能がある場合は、代わりにサービスを使用してコントローラーに挿入します。サービスは、コントローラー間でデータを共有する最適な方法です。

変数または関数を宣言したり、$ rootScopeでオブジェクトを宣言したりできます。これらはアプリケーション全体に存在します。

AngularJSコントローラー間でデータを共有する

0
Ritesh