[angularjs] angularjs系列笔记指令

Posted 陶士涵的菜地

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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>

 

以上是关于[angularjs] angularjs系列笔记指令的主要内容,如果未能解决你的问题,请参考以下文章

[angularjs] angularjs系列笔记模型

[angularjs] angularjs系列笔记指令

[angularjs] angularjs系列笔记过滤器

[angularjs] angularjs系列笔记控制器

AngularJS 笔记系列控制器和表达式

《AngularJS即学即用》读书笔记