helixxchi

テクノロジープログラミング一般的なカテゴリ

Angularjsで別のコントローラーから1つのコントローラーを呼び出す方法は？

23 9月 2021

角度のファクトリを使用してサービスを作成する（UserServiceなど）を介して、angularjsで別のコントローラーから1つのコントローラーを呼び出す方法。

anglejsで別のコントローラーから1つのコントローラーを呼び出す方法

また、コントローラーはさまざまな方法でDOMに接続できます。 AngularJs コントローラの1つのメソッドを呼び出す別のコントローラーで。

単純な親と子のコントローラーがAngularJsアプリケーション内の他のメインコントローラーとサブコントローラーと通信できるようにしたい場合は、いくつかの困難な状況が存在する可能性があります。

手順：1。$ rootScope。$ emit（）および$ rootScope。$ broadcast（）

<h3>how to call one controller from another controller in angularjs</h3>
<body ng-app="myApp">
    
 ng-controller="ProductCtrl" class="ng-scope">
      // ProductCtrl
      
 ng-controller="Sibling1" class="ng-scope">
        // Sibling first controller
      

      
 ng-controller="Sibling2" class="ng-scope">
        // Sibling Second controller
        
 ng-controller="category" class="ng-scope">
          // category controller
        

      </div>
    </div>
</body>

<h3>how to call one controller from another controller in angularjs</h3>

ng-controller="ProductCtrl" class="ng-scope">

// ProductCtrl

ng-controller="Sibling1" class="ng-scope">

// Sibling first controller

ng-controller="Sibling2" class="ng-scope">

// Sibling Second controller

ng-controller="category" class="ng-scope">

// category controller

</div>

</body>

Laravel6別のコントローラーからコントローラーメソッドを呼び出す

ステップ：Angularjsコード

 var app =  angular.module('myApp',[]);//We will use it throughout the example 
    app.controller('category', function($rootScope) {
      $rootScope.$emit('categoryEmit', 'category calling Product');
      $rootScope.$broadcast('siblingAndProduct');
    });

app.controller('Sibling1', function($rootScope) {
  $rootScope.$on('categoryEmit', function(event, data) {
    console.log(data + ' Inside Sibling one');
  });
  $rootScope.$on('siblingAndProduct', function(event, data) {
    console.log('broadcast from category in Product');
  });
});

app.controller('Sibling2', function($rootScope) {
  $rootScope.$on('categoryEmit', function(event, data) {
    console.log(data + ' Inside Sibling two');
  });
  $rootScope.$on('siblingAndProduct', function(event, data) {
    console.log('broadcast from category in Product');
  });
});

app.controller('ProductCtrl', function($rootScope) {
  $rootScope.$on('categoryEmit', function(event, data) {
    console.log(data + ' Inside Product controller');
  });
  $rootScope.$on('siblingAndProduct', function(event, data) {
    console.log('broadcast from category in Product');
  });
});

var app = angular.module('myApp',[]);//We will use it throughout the example

app.controller('category', function($rootScope) {

$rootScope.$emit('categoryEmit', 'category calling Product');

$rootScope.$broadcast('siblingAndProduct');

});

app.controller('Sibling1', function($rootScope) {

$rootScope.$on('categoryEmit', function(event, data) {

console.log(data + ' Inside Sibling one');

});

$rootScope.$on('siblingAndProduct', function(event, data) {

console.log('broadcast from category in Product');

});

app.controller('Sibling2', function($rootScope) {

$rootScope.$on('categoryEmit', function(event, data) {

console.log(data + ' Inside Sibling two');

});

$rootScope.$on('siblingAndProduct', function(event, data) {

console.log('broadcast from category in Product');

});

app.controller('ProductCtrl', function($rootScope) {

$rootScope.$on('categoryEmit', function(event, data) {

console.log(data + ' Inside Product controller');

});

$rootScope.$on('siblingAndProduct', function(event, data) {

console.log('broadcast from category in Product');

});

ステップ：3。2番目のコントローラーがカテゴリーの場合、カテゴリー製品通信を使用できます。

 ng-controller="ProductCtrl">
 
 ng-controller="categoryCtrl">
 

</div>

ng-controller="ProductCtrl">

ng-controller="categoryCtrl">

</div>

Angularjs

 app.controller('ProductCtrl', function($scope) {
   $scope.value='Its Product';
      });
  app.controller('categoryCtrl', function($scope) {
   console.log($scope.value);
  });

app.controller('ProductCtrl', function($scope) {

$scope.value='Its Product';

});

app.controller('categoryCtrl', function($scope) {

console.log($scope.value);

});

ステップ：4。サービスを使用する

app.service('communicate',function(){
  this.communicateValue='First';
});

app.controller('ProductCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Product Trans");
});

app.controller('categoryCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" category Trans");
});

app.service('communicate',function(){

this.communicateValue='First';

});

app.controller('ProductCtrl',function(communicate){//Dependency Injection

console.log(communicate.communicateValue+" Product Trans");

});

app.controller('categoryCtrl',function(communicate){//Dependency Injection

console.log(communicate.communicateValue+" category Trans");

});

ステップ：5。ハックの種類– angle.element（）の助けを借りて

 id='Product' ng-controller='ProductCtrl'>{{varProduct}}
  ng-click='getValueFromcategory()'>Click to get ValueFormcategory
 
 id='category' ng-controller='categoryCtrl'>{{varcategory}}
    ng-click='getValueFromProduct()'>Click to get ValueFormProduct 
 

</div>
<p>how to call one controller from another controller in angularjs</p>

id='Product' ng-controller='ProductCtrl'>{{varProduct}}

ng-click='getValueFromcategory()'>Click to get ValueFormcategory

id='category' ng-controller='categoryCtrl'>{{varcategory}}

ng-click='getValueFromProduct()'>Click to get ValueFormProduct

</div>

<p>how to call one controller from another controller in angularjs</p>

app.controller('ProductCtrl',function($scope){
 $scope.varProduct="First Product";
  $scope.getValueFromcategory=function(){
  var categoryScope=angular.element('#category').scope();
  console.log(categoryScope.varcategory);
  }
});

app.controller('CarentCtrl',function($scope){
 $scope.varcategory="First category";
  $scope.getValueFromProduct=function(){
  var ProductScope=angular.element('#Product').scope();
  console.log(ProductScope.varProduct);
  }
});