angular指令中link函数参数实例详解

最新推荐文章于 2020-03-08 15:31:39 发布

原创最新推荐文章于 2020-03-08 15:31:39 发布 · 8.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angular

angular 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了Angular指令中的link函数及其参数，包括如何使用js代码与html结合，以及页面实际效果的展示。

* html代码 *

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <greeting greet="sayHello(name)"></greeting>
<!--
            <greeting greet="sayHello2(name)"></greeting>
-->
            <greeting greet="sayHello(name)" class="testclass"></greeting>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="testtest.js"></script>
</html>

* js 代码 *

var MyModule = angular.module('MyModule',[]);
MyModule.controller('MyCtrl',function($scope){
  $scope.sayHello = function(name){
    alert("hello "+name);
  }
});
MyModule.directive('greeting', function () {
  return{
    restrict:'AE',
    scope:{
      say:'&greet'
    },
    //template不操作对象，只是描述了指令标签的html内容，可以给内部的dom绑定方法
    template:'<div class="testclass" id="testid"><input class="" ng-model="input1"><br/><button ng-click="say({name:input1})">click</button><br/></div>',
    link:function(scope,ele,attr){
      scope.input1 = "11111111";
      scope.input2 = "2222222222";
      //ele指的是html中的指令标签的对象，可以理解成$（'directive对象'），类似jquery的选择器。
      //这里给element绑定方法或者添加clss等，只能针对整个指令dom
      ele.addClass('btn btn-primary');//对指令对象添加新的class
      ele.bind("mouseenter", function() {//对指令对象添加监听方法
        console.log(scope.input2);
      });
      console.log(attr.class);//获取指令dom上面的属性名称。输出为testclass
      console.log(attr.greet);//获取指令dom上面的属性名称。输出为sayHello(name)
      //因为通过scope传了属性值greet，所以attr上greet属性是已经存在的属性。
    }
  }
});