码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-03-20 01:56:01      阅读:211      评论:0      收藏: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>

 

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

标签:

原文地址:http://www.cnblogs.com/taoshihan/p/5297003.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!