angularJS——directive的使用

使用Directive自定义HTML组件：

app.directive('hello',function(){
       return {
           restrict:'E',//element
           replace:true,//用template替换自定义的directive标签
           template:'<div>Hello Angular</div>'
       } 
})

   

app.directive('hello',function(){
       return {
           restrict:'A',//attributer     c-class   放在同一个element里面可以一起运行
　　　　　　 link:function (){
　　　　　　     alert('我在这里');
  　　　　　　　　
           }
       } 
})

　　

             restrict的含义和应用

   　　　replace的使用

　　　　template的使用

directive和controller之间的会话

　　　　　　例1：

var app=angular.module('app',[]);
app.controller( 'AppCtrl' ,function ($scope) {
   $scope.loadMoreData=function(){
          alert('正在加载数据……')
    }
   $scope.delData=function() {
          alert('正在删除数据……')
   }
} )
app.directive( 'enter' , function () {
    return  function( scope, element, attrs){
          element.bind( 'mouseenter' ,function () {
             //scope.loadMoreData();
　　　　　　　　//scope.$apply("loadMoreData()")
　　　　　　　　//scope.$apply(attrs.load)
　　　　　　　　//scope.$apply(attrs.del)
          } )
    }
} )
<body>
    <div ng-app="app">
       <div ng-controller="AppCtrl">
           <div enter load="loadMoreData()" del="delData()">I'm here</div>
       </div>
    </div>
</body>

　　　　　　例2：

 

             controller属性的使用

　　　　link属性的使用

　　　　directive中调用controller的方法

使用angular.element操作DOM

 

posted @ 2022-03-30 16:19  聂小恶  阅读(304)  评论(0)  编辑  收藏  举报