[angularjs] angularjs系列笔记(二)指令详解编程语言

重复HTML元素

ng-repeat指令可以重复HTML元素

 

  <body> 
    <div ng-app="Home" ng-controller="index"> 
      <p ng-repeat="x in names">{{x.name}}</p> 
    </div> 
 
  </body> 
 
  <script type="text/javascript"> 
  //实例化应用对象,参数:模块名,空数组 
  var app=angular.module("Home",[]); 
  //调用应用对象的controller()方法,参数:控制器名,回调函数 
  app.controller("index",function($scope){ 
    $scope.names=[{name:'tsh'},{name:'tsh1'}]; 
  }) 
  </script>

 

创建自定义指令

使用.directive()函数来自定义指令,要调用自定义指令,html元素上需要添加自定义指令名,使用驼峰法来命名一个指令

限制使用,默认是元素名调用和属性调用

  <body> 
    <div ng-app="Home"> 
      元素名调用 
      <tsh></tsh> 
      属性调用 
      <div tsh></div> 
      类名调用 
      <div class="tsh"></div> 
    </div> 
 
  </body> 
 
  <script type="text/javascript"> 
  //实例化应用对象,参数:模块名,空数组 
  var app=angular.module("Home",[]); 
  //调用应用对象的directive()方法,参数:指令名,回调函数,返回一个对象 
  app.directive("tsh",function(){ 
    return { 
      template:"<p>我是自定义指令</p>" 
    } 
  }); 
  </script>

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/12716.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论