[angularjs] angularjs系列笔记(二)指令

2019-09-10 11:16:16 浏览数 (1)

重复HTML元素

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

代码语言:javascript复制
  <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元素上需要添加自定义指令名,使用驼峰法来命名一个指令

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

代码语言:javascript复制
  <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>

0 人点赞