<!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. Ecelipse上添加Server

    第一步,打开eclipse工具,点击菜单栏中的"Help",选择"Install New Software" 第二步,点击Add按钮 第三步,Name输入:&q ...

  2. PHP服务器Apache与Nginx的对比分析

    PHP服务器Apache与Nginx的对比分析 本篇文章给大家带来的内容是关于PHP服务器Apache与Nginx的对比分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Apach ...

  3. JavaScript模块载入框架sea.js 学习一

    简单总结sea.js 学习 文件文件夹结构   /sea/sea.js      下载地址  http://seajs.org/docs/#downloads   /sea/jquery-sea.js ...

  4. java 基础响应体定义 - 通用

    package com.teewon.viewservice.entitiy.base; import java.io.Serializable; import java.util.List; pub ...

  5. Android APP性能测试笔记（一）

    Android APP性能测试笔记(一) (1)工具使用   Android Studio  GT, root的真机 (2)记录apk大小(对比竞品)   使用Android Studio导入需要测试 ...

  6. node.js如何引用其它js文件

    以Java来说,比如要实现第三方存储,我可能需要导入对应的库,以maven为例,使用腾讯云或者七牛云.阿里云,我需要导入对应的maven依赖.再比如,有些时候我们封装某个类,而那个类不在该包下,我们需 ...

  7. Luogu4983 忘情

    Luogu4983 忘情 定义序列 \(x_1,\ x_2,\ \cdots,\ x_n\) 的值为 \(\frac{((\displaystyle\sum_{k=1}^nx_k\times \bar ...

  8. zookeepeer使用java api

    一.引入依赖 <!-- https://mvnrepository.com/artifact/org.apache.zookeeper/zookeeper --> <dependen ...

  9. 蓝牙LMP概述

    LMP 全称是Link Manager Protocol,我们还是要一张图,说明LMP 在哪里? 他是在HCI 以下,baseband 以上,实现在蓝牙控制器中. 按照协议规范,我们分几个部分来分别介 ...

  10. Apache Spark 2.2.0新特性介绍（转载）

    这个版本是 Structured Streaming 的一个重要里程碑,因为其终于可以正式在生产环境中使用,实验标签(experimental tag)已经被移除.在流系统中支持对任意状态进行操作:A ...