<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
</head>
<body>

<div ng-controller="myCtrl">
</div>
<!--调用指令，并通过属性传参-->
<ts-directive ts-name="Hello World"></ts-directive>

<script>
  var app = angular.module('myApp', ['ng']);
  //创建指令
  app.directive('tsDirective', function () {
    return{
      template:'<h1>{{tsName}}</h1>',
      scope:{
        tsName:'@'//@取ts-name属性对应的值
      }
    }
  })

  app.controller('myCtrl', function () {
    console.log('myCtrl  func is called');
  })
</script>
</body>
</html>

Angular 自定义指令传参的更多相关文章

  1. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  2. Angular自定义指令（directive）

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  3. datasnap远程方法支持自定义对象传参

    有同仁需要远程方法传输自定义的数据类型,他以为要自己写代码会很复杂,其实DATASNAP早就为我们想到了. datasnap的数据序列和还原真是无与伦比的强大,其远程方法支持自定义对象传参,DATAS ...

  4. angularjs 指令传参规则

    angularjs 指令传参规则 xx-,data- 驼峰

  5. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  6. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  7. Angular17 Angular自定义指令

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...

  8. angular自定义指令

    1.在directive文件下创建指令的js文件 通常自定义指令需要声明模块(注意定义指令时, js内部指令名称需采用 aaAaBb驼峰的命名方式  html中使用的是aa-aa-bb) e.g (f ...

  9. angular -- 自定义指令和模板

    angular 可以自定义一些指令,来简化我们前端的工作量. 第一种:简单指令示例: <h3>自定义指令</h3> <sheng></sheng> &l ...

随机推荐

  1. 贪心 C - Polycarp's New Job

    Polycarp has recently got himself a new job. He now earns so much that his old wallet can't even sto ...

  2. 解决不能再jupyter notebook中使用tensorflow

    在搭建cuda + Anaconda + tensorflow的开发环境时,在虚拟环境中的jupyter notebook启动后无法导入tensorflow.具体解决方案如下: 1.首先在虚拟环境中安 ...

  3. 基于Spring Boot和Shiro的后台管理系统FEBS

    FEBS是一个简单高效的后台权限管理系统.项目基础框架采用全新的Java Web开发框架 —— Spring Boot 2.0.3,消除了繁杂的XML配置,使得二次开发更为简单:数据访问层采用Myba ...

  4. 9.1 oop习题集合

    [练习题]01.类的成员变量 猜数字游戏一个类A有一个成员变量v有一个初值100.定义一个类对A类的成员变量v进行猜.如果大了则提示大了小了则提示小了.等于则提示猜测成功. import j ...

  5. 腾讯app自动化测试读后感

    1.播放器播放视频,如何验证视频播放成功? 1.1播放时间>=0,获取Video标签里的current time判断. 1.2有播放画面,截屏获取. 框架自带的截图功能, 1.3有播放声音,获取 ...

  6. Python+自动化测试框架的设计编写

    Python之一个简单的自动化测试框架:https://baijiahao.baidu.com/s?id=1578211870226409536&wfr=spider&for=pc h ...

  7. LDAP1-安装部署LDAP服务

    基于Linux部署openldap服务 参考文档: https://blog.csdn.net/computer1024/article/details/78172785 参考文档:  https:/ ...

  8. BZOJ3489 A simple rmq problem K-D Tree

    传送门 什么可持久化树套树才不会写呢,K-D Tree大法吼啊 对于第\(i\)个数,设其前面最后的与它值相同的位置为\(pre_i\),其后面最前的与它值相同的位置为\(aft_i\),那么对于一个 ...

  9. python爬虫随笔(2)—启动爬虫与xpath

    启动爬虫 在上一节中,我们已经创建好了我们的scrapy项目,看着这一大堆文件,想必很多人都会一脸懵逼,我们应该怎么启动这个爬虫呢? 既然我们采用cmd命令创建了scrapy爬虫,那就得有始有终有逼格 ...

  10. 二十一、当锚点遇到fixed（margin和padding）

    当锚点点击跳转的时候,如果上方有fixed,锚点跳转会默认跳转到top为0的地方,有一部分就被遮挡了 解决方法:(像素值随便给的) 给锚点跳转到的具体内容加padding-top:-50px:marg ...