link属性

前端之家收集整理的这篇文章主要介绍了link属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular中指令与控制器之间的交互(link属性使用)

  link属性值为一个函数,link函数主要用于操作dom元素,给dom元素绑定事件和监听,这个函数有五个参数:scope,element,attrs,ctrl,linker
- scope: 指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释
- element: 指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法属性.)
- attrs: 指令元素的属性的集合
- ctrl : 需要和require属性一起使用,用于调用其他指令的方法,指令之间的互相通信,这个在讲require属性的时候会详细解释
- linker:也就是transclude()函数,可以用于得到指令中需要被嵌入的html内容

认识link属性的scope、element、attrs方法

下面举个例子:
当我们在01link.html加入:

  1. <div ng-controller="myCtrl">
  2. <loader">滑动加载</loader>
  3. </div>


创建01link.js:

  1. var myModule = angular.module('myModule',[]);
  2. myModule.controller('myCtrl',['$scope',function($scope){
  3. $scope.loadData = function(){
  4. console.log('loadData 加载数据中11111....');
  5. }
  6. }]);
  7. myModule.directive('loader',function(){
  8. return {
  9. restrict : 'AE',link : function(scope,attrs){
  10. element.bind('mouseenter',function(){
  11. scope.loadData();
  12. scope.$apply('loadData()');//和上面一句作用一样
  13. });
  14. }
  15. }
  16. })

这时候,鼠标移动到标签上,控制台输出loadData 加载数据中11111….;
但是scope.loadData()scope.$apply('loadData')总是有区别的,当我们的html多加一个loader标签,并且处理不同的事务,就需要加入属性来区别:

  1. <div ng-controller="myCtrl">
  2. <loader hoToLoad="loadData()">滑动加载</loader>
  3. </div>
  4. <div ng-controller="myCtrl2">
  5. <loader hotoload="loadData2()">滑动加载</loader>
  6. </div>
  7. ```
  8. 想要两个滑动加载标签都响应,就需改变js代码
  9. ```
  10. var myModule = angular.module('myModule',function($scope){
  11. $scope.loadData = function(){
  12. console.log('loadData 加载数据中11111....');
  13. }
  14. }]);
  15. myModule.controller('myCtrl2',function($scope){
  16. $scope.loadData2 = function(){
  17. console.log('loadData2 加载数据中2222....');
  18. }
  19. }]);
  20. myModule.directive('loader',function(){
  21. // scope.loadData();
  22. // scope.$apply('loadData()')
  23. scope.$apply(attrs.hotoload); //注意js中需要写成小写,html中可以是大写
  24. });
  25. }
  26. }
  27. })

认识link属性的ctrl方法? (指令之间怎样交互)

  当我们用到link中ctrl属性的时候,就是指令与指令之间的交互,一个指令用到另一个指令的控制器,再举个例子:
html中我们引入bootstrap.css和Angular.js,

  1. <div class="row">
  2. <div class="col-md-3">
  3. <superman strength>动感超人---力量</superman>
  4. </div>
  5. </div>
  6. <div class="row">
  7. <div class="col-md-3">
  8. <superman strength speed>动感超人2----力量+敏捷</superman>
  9. </div>
  10. </div>
  11. <div class="row">
  12. <div class="col-md-3">
  13. <superman strength speed light>动感超人3---力量+敏捷+发光</superman>
  14. </div>
  15. </div>

js代码如下,需要注意的点:

  • scope属性:创建独立的作用域;
  • require : ‘^superman’,表示strength指令依赖Superman指令,也就是说,当用到require指令的时候才能够使用到link里面的ctrl属性,因位这个ctrl属性来自require所引入的依赖。
  1. var myModule = angular.module('myModule',[]);
  2. myModule.directive('superman',function(){
  3. return {
  4. scope : {},//创建独立作用域
  5. restrict : 'AE',controller : function($scope){//指令内部Controller,给指令暴露出public方法,提供外部调用
  6. $scope.abilities = [];
  7. this.addStrength = function(){
  8. $scope.abilities.push('strength');
  9. };
  10. this.addSpeed = function(){
  11. $scope.abilities.push('speed');
  12. };
  13. this.addLight = function(){
  14. $scope.abilities.push('light');
  15. }
  16. },attrs){
  17. element.addClass('btn btn-primary');
  18. element.bind('mouseenter',function(){
  19. console.log(scope.abilities);
  20. })
  21. }
  22. }
  23. });
  24. myModule.directive('strength',function(){
  25. return {
  26. require : '^superman',//表示strength指令依赖Superman指令
  27. link : function(scope,supermanCtrl){
  28. supermanCtrl.addStrength();
  29. }
  30. }
  31. });
  32. myModule.directive("speed",supermanCtrl){
  33. supermanCtrl.addSpeed();
  34. }
  35. }
  36. });
  37. myModule.directive("light",function(){
  38. return{
  39. require : '^superman',supermanCtrl){
  40. supermanCtrl.addLight();
  41. }
  42. }
  43. });

github源码:03link —— 指令和控制器、指令和指令之间的交互(link属性的使用方法

猜你在找的Angularjs相关文章