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

* 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="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:'


'
, 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属性是已经存在的属性。 } } });

* 页面截图 *
angular指令中link函数 参数实例详解_第1张图片

你可能感兴趣的:(angular)