<!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. ES5-ES6-ES7_Promise对象详解

    Promise对象概述(什么是Promise) Promise 是异步编程的一种解决方案,比传统的异步解决方案——回调函数和事件——更合理和更强大 所谓Promise,简单说就是一个容器,里面保存着某 ...

  2. 为什么swift是面向协议的编程--对面向对象机制的改进

    主要目标是提供抽象能力和解决值类型的多态问题 Actually, Abrahams says, those are all attributes of types, and classes are j ...

  3. 关于CUDA，cuDNN，TF，CUDA驱动版本兼容问题

    实际工作当中,经常维护好几个项目的代码,不同项目依赖的TF版本不一致问题.网上找了好多资料,但是每次遇到的问题都不一样,每次都要去查(就是是一样的问题,解决办法也可能会不一样)每次踩坑无数,今天痛定思 ...

  4. spring jwt springboot RESTful API认证方式

    RESTful API认证方式 一般来讲,对于RESTful API都会有认证(Authentication)和授权(Authorization)过程,保证API的安全性. Authenticatio ...

  5. Python：margin collapse

    margin collapse:边界 折叠/重叠/坍塌 此种现象只会垂直方向并且要满足一定条件时才会出现这种现象. https://tech.youzan.com/css-margin-collaps ...

  6. ajax如何增加请求头

    代码如下(主要关键就是headers,大家可以根据需要来增加请求头): $.ajax({ type: "POST", timeout: , // 超时时间 10 秒 headers ...

  7. 阿里云轻量应用服务器debian8.9用apache多端口搭建多站点

    前几天想要再搭个网站玩玩,就用阿里的服务器,apache本地搭建站点和服务器相差不多,然而却踩了大坑,差点耗死在这儿. 先进入apache这个目录,有如下文件夹: 打开ports.conf,  添加 ...

  8. 在.NET中调用Java的类

    .NET不能直接调用Java的类,但IKVM.NET解决了这个问题. IKVM.NET提供了两种方式调用java的类: ①把生成的jar包放置在程序根目录,然后通过创建URL实例的方式去调用类中的方法 ...

  9. 【H5 音乐播放实例】第一节 音乐详情页制作（1）

    本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面. 通过本教程,您会学到: 1.H5音乐播放 (带音轨) 2.iconfont字体图标库 3.div+css ...

  10. 使用keras的LSTM进行预测----实战练习

    代码 import numpy as np from keras.models import Sequential from keras.layers import Dense from keras. ...