AngularJS1.X指令
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<test title="{{t}}" >
<span>我的angularjs</span>
</test>
</div>
</body> <script>
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore="motorola";
}); myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
title:"@"
},
template:'<div >{{title}}+内部</div>' }
});
</script>
</html>
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-controller="listCtrl">
<input type="text" ng-model="t" />
<test title="t" >
<p>{{title}}</p>
<span>我的angularjs</span>
</test>
</div> </body> <script>
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore="motorola";
}); myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
title:"="
},
template:'<div >{{title}}+内部</div>' }
}); </script>
</html>
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-controller="listCtrl">
<test flavor="logchore()" ></test>
</div> </body> <script>
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.logchore=function(){
alert('ok');
};
}); myApp.directive('test',function(){
return {
'restrict':'E',
scope:{
flavor:"&"
},
template:'<div ><button ng-click="flavor()"></button></div>' }
}); </script>
</html>
<!DOCTYPE html>
<html ng-app='myApp'> <head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head> <body> @father:
<input type="text" ng-model="data" />
<me title="{{data}}">@</me> =father:
<input type="text" ng-model="msg" />
<you title="msg">=</you>
<div ng-controller="listCtrl">
<test flavor="logchore(str)"></test>
</div>
</body> <script>
var app = angular.module("myApp", []);
app.controller('listCtrl', function ($scope) {
$scope.logchore = function (str) {
alert(str);
};
}); app.directive('me', function () {
return {
restrict: "E", //单向绑定，父元素可以改变子元素的model，子元素不能改变父元素的model
scope: {
title: '@'
},
template: "<div>{{title}}@:<input type='text' ng-model='title'/></div>"
}
}); app.directive('you', function () {
return {
restrict: "E",
scope: {
title: "=" //双向绑定，父元素可以改变子元素的model，子元素可以改变父元素的model
},
template: "<div>{{title}}=:<input type='text' ng-model='title'/></div>"
}
}) app.directive('test', function () {
return {
'restrict': 'E',
scope: {
flavor: "&"
},
//&是负责方法调用的，其中可以添加参数
template: '<div><input ng-model="v"/><button ng-click="flavor({str:v})">点击</button></div>'
}
});
</script> </html>
@当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。????=和&与@差不多，只不过=进行的是双向的数据绑定，不论模板还是父作用域上的属性的值发生改变都会使另一个值发生改变，而&是绑定函数而已
AngularJS1.X指令的更多相关文章
- AngularJS1.X学习笔记4-内置事件指令及其他
AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...
- AngularJS1.X学习笔记3-内置模板指令
前面学习了数据绑定指令,现在开始学习内置模板指令.看起来有点多,目测比较好理解.OK!开始! 一.ng-repeat 1.基本用法 <!DOCTYPE html> <html lan ...
- AngularJS1.X学习笔记10-自定义指令（下）
继续继续,学完这个部分就去吃饭.引用自由男人的话作为本文的开始:“默认情况下,链接函数被传入了控制器的作用域,而该控制器管理着的视图包含了指令所应用到的元素”.果然像是绕口令,还是看看你的例子比较好. ...
- AngularJS1.X学习笔记9-自定义指令（中）
今天好大的雨啊!上一节中,我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数,事实上我们的工厂函数也是可以返回一个对象,这个对象里面可以包含很多的属性,这使得我们可以创建更加强大的指令. 一 ...
- AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...
- angularJS1笔记-(17)-ng-bind-html指令
angular不推荐大家在绑定数据的时候绑定html,但是如果你非要这么干也并不是不可以的.举个例子: <!DOCTYPE html> <html lang="en&quo ...
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(9)-自定义指令(restrict/template/replace)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- pytest-conftest.py作用范围
1.conftest.py解释 conftest.py是pytest框架里面一个很重要的东西,它可以在这个文件里面编写fixture,而这个fixture的作用就相当于我们unittest框架里面的s ...
- 吴裕雄 python 神经网络——TensorFlow训练神经网络：花瓣识别
import os import glob import os.path import numpy as np import tensorflow as tf from tensorflow.pyth ...
- IDEA 查看字节码
参考:https://www.jianshu.com/p/18953ec8c0b7 打开工具栏 输入参数: 参数: $JDKPath$\bin\javap.exe -c $FileClass$ $Ou ...
- 【洛谷P3500】TES-Intelligence Test
前言 先是这位神仙写了这道题 \(O(n\log n)\) 的做法.然后去他的博客上恰了一波. 然后发现这道题有 \(O(n)\) 的做法的.其实也不难. 题目 题目链接:https://www.lu ...
- pandas 存储文件到MySQL 以及读取
pandas导入数据到MySQL 1.导入必要的库 2.创建链接 3.导入数据 import pandas as pd from sqlalchemy import create_engine con ...
- Write-Up-wakanda-1
关于 下载地址:点我 哔哩哔哩:哔哩哔哩 祖传开头 信息收集 这里用vm虚拟机可能有一点问题,因为官方的是用vbox虚拟机导出的镜像文件.所以这次使用vbox虚拟机. ➜ ~ ip a show de ...
- 面试问题之——给你图片的url，你能知道它所占的字节空间吗？
从一个需求说起 这标题起得有点标题党,实际情况是我最近在做一个公司内部工具时,遇到了这么一个需求,给定一个静态资源站点上某张图片的url(比如https://a.xxxcdn.com/demo.jpg ...
- springMVC是如何实现参数封装和自动返回Json的
HTTP 请求和响应是基于文本的,意味着浏览器和服务器通过交换原始文本进行通信.但是,使用 Spring,controller 类中的方法返回纯 ‘String’ 类型和域模型(或其他 Java 内建 ...
- nginx的addition模块在响应的前后报文添加内容与变量的运行原理
nginx默认未编译此模块:让nginx编译启用此模块 ./configure --prefix=/data/web --sbin-path=/usr/bin --user=nginx --group ...
- 了解 Fetch API与Fetch+Async/await
背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...