美文网首页
自定义指令

自定义指令

作者: c59ffede9db6 | 来源:发表于2017-04-23 03:39 被阅读0次
<!DOCTYPE html>
<html ng-app='test'>
  <head>
     <meta charset="utf-8">
     <title>angular</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0,
     maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
     <link rel="stylesheet" type="text/css" href="static/css/reset.css">
     <script src="js/angular1.58.js" charset="utf-8"></script>
     <script >
       var app=angular.module('test',[])
       app.directive('abc',function(){
         return {
           restrict:'E',
           template:'<span>12354224</span> '
         }
       })
       app.controller('zhangsan',function($scope,$http){

       })
     </script>
 </head>
 <body ng-controller='zhangsan'>
 <div class="">
   <abc></abc>
 </div>
<!-- <div class="">
   <abc><span>12354224</span> </abc>
 </div> -->
 </body>
</html>

<!DOCTYPE html>
<html ng-app='test'>
  <head>
     <meta charset="utf-8">
     <title>angular</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0,
     maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
     <link rel="stylesheet" type="text/css" href="static/css/reset.css">
     <script src="js/angular1.58.js" charset="utf-8"></script>
     <script >
       var app=angular.module('test',[])
       app.directive('abc',function(){
         return {
           restrict:'C',
           template:'<span>12354224</span> '
         }
       })
       app.controller('zhangsan',function($scope,$http){

       })
     </script>
 </head>
 <body ng-controller='zhangsan'>
 <div class='abc' >

 </div> //<div class="abc"><span>12354224</span> </div>
 </body>
</html>

笔记

指令:重用,组件

app.directive('abc',function(){
  return {
      restrict,     四种模式
     template,   
     replace, 
    transclude  嵌入,占位符
 }
})

<!DOCTYPE html>
<html ng-app='test'>
  <head>
     <meta charset="utf-8">
     <title>angular</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0,
     maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
     <link rel="stylesheet" type="text/css" href="static/css/reset.css">
     <script src="js/angular1.58.js" charset="utf-8"></script>
     <script >
       var app=angular.module('test',[])
       app.directive('abc',function(){
         return {
           restrict:'A',
           template:`<span ng-transclude></span><a href='javascript:;'>x</a>`,
           transclude:true
         }
       })
       app.controller('zhangsan',function($scope,$http){
            $scope.arr=['apple','pear','orange','banana']
       })
     </script>
 </head>
 <body ng-controller='zhangsan'>
 <ul>
   <li abc ng-repeat='v in arr'>{{v}}</li>
 </ul>
 </body>
</html>

相关文章