Example code for how to implement interaction between controllers and instructions in angularjs-JS Tutorial-php.cn

Example code for how to implement interaction between controllers and instructions in angularjs

黄舟

Release： 2017-06-01 09:34:42

Original

1087 people have browsed it

This article mainly introduces the detailed explanation of how to implement the interaction between controller and instructions in angular js. It has certain reference value. If you are interested Friends, you can refer to

If we have the following DOM structure:

  <p ng-controller="MyCtrl"> 
   <loader>滑动加载</loader> 
</p>

Copy after login

At the same time, our controller has the following signature:

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]);

Copy after login

At the same time, the signature of the instruction is as follows:

myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind(&#39;mouseenter&#39;, function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
      }); 
    } 
  }  
});

Copy after login

At this time, our instructions can complete the call to the controller through scope.loadData or scope.$apply. But what if we have two controllers? And the methods in $scope are different in the two controllers?

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]);

Copy after login

How to call the method in our instructions at this time, according to the above method, then You will face a problem: MyCtrl2 does not have our loadData, but only loadData2! At this time we need to use the following instructions to customize the attributes!

We have defined two controller controllers, They are MyCtrl and MyCtrl2 respectively. Both controllers use our own defined instructions load:

<!doctype html> 
<html ng-app="MyModule"> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
  <body> 
  <!--第一个控制器MyCtrl--> 
    <p ng-controller="MyCtrl"> 
      <loader howToLoad="loadData()">滑动加载</loader> 
    </p> 
    <!--第二个控制器MyCtrl2--> 
    <p ng-controller="MyCtrl2"> 
      <loader howToLoad="loadData2()">滑动加载</loader> 
    </p> 
  </body> 
  <script src="framework/angular-1.3.0.14/angular.js"></script> 
  <script src="Directive&Controller.js"></script> 
</html>

Copy after login

We customized the Controller code as follows:

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]); 
//在模块下挂载一个loader指令 
myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
        // scope.$apply(attrs.howtoload); 
        //其中scope为POJO，但是有一系列的工具方法如$watch,$apply等 
      }); 
    } 
  }  
});

Copy after login

Obviously there are two controls here The controllers are MyCtrl and MyCtrl2 respectively. How does our instruction know which Controller to call? At this time, we need to specify different attributes for our instructions. Use this attribute to judge different controller calls, so that our instructions can be called in different is called in the controller!

Summary: The reason why instructions are defined is for reuse. In order to allow instructions to interact with different controllers, different configuration items will be defined for instructions. This is the purpose of instructions and The principle of data interaction between controllers!

The above is the detailed content of Example code for how to implement interaction between controllers and instructions in angularjs. For more information, please follow other related articles on the PHP Chinese website!