zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    关于“每日代码系列”以及后续计划
    每日代码系列(22)
    每日代码系列(21)
    mvcc
    父进程是1号进程产生大量的僵尸进程的解决方案
    nginx学习之路
    Zookeeper Curator 分布式锁
    jvm垃圾收集器汇总
    MySql分库分表以及相关问题
    Https交互原理
  • 原文地址:https://www.cnblogs.com/taoshihan/p/5297003.html
Copyright © 2011-2022 走看看