[angularjs] angularjs系列笔记（二）指令

唯一Chat

发布于 2019-09-10 03:16:16

41500

代码可运行

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

运行总次数：0

代码可运行

重复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>