前言

我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去。
一、首先回顾一下有哪些绑定策略?
看这个实在是有点抽象了,我们来看具体的实例分析吧!
二、简单的Demo实例
@绑定:传递一个字符串作为属性的值。
比如 str : ‘@string'
控制器中代码部分示例:
myDirec.controller('MyCtrl3',['$scope',function($scope){
$scope.ctrlFlavor="鸡尾酒";
$scope.sayHello=function(name){
alert("Hello "+name);
};
}]);
myDirec.directive("drink",function(){
return{
restrict:'AE',
scope:{
flavor:'@' //自动绑定,传递的是字符串
},
template:"<div>{{flavor}}</div>",
};
});
页面中使用标签部分示例:
<div ng-controller="MyCtrl3">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
分析我们在drink指令中为什么能取得在父作用域中的值呢?原因就在于我们使用了@绑定策略,可以将ctrlFlavor赋值给flavor,这样在模板中就能取到该值了。
=绑定:指定获取属性的类型为父作用域的属性
myDirec.directive("drink2",function(){
return{
restrict:'AE',
scope:{
flavor:'=' //自动绑定
},
template:'<input type="text" ng-model="flavor"/>'
};
});
页面:
<div ng-controller="MyCtrl3"> <drink2 flavor="ctrlFlavor"></drink2> </div>
执行的流程是这样的:
① 指令被编译的时候会扫描到template中的模型发现有一个flavor,
② 查找scope中是否定义:通过=与父作用域绑定,方式是传递父作用域中的属性ctrlFlavor;
③ flavor与父作用域中的ctrlFlavor属性绑定,找到它的值“鸡尾酒”;
④ 将model的值显示在模板中。
&绑定:传递的是父作用域中的函数
控制器部分:
myDirec.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button ng-click="greet({name:userName})">问候一下</button><br/>'
};
});
页面部分:
<div ng-controller="MyCtrl3"> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div>
从结果上看,三个输入框中的内容互不影响,因为都是新的独立作用域,能够完成从视图到模型的绑定。
三、Expander示例
首先看控制器代码:
/*Expander示例*/
myDirec.controller('SomeController',function($scope) {
$scope.title = '点击展开';
$scope.text = '这里是内部的显示的内容';
});
myDirec.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
scope : {
title : '=expanderTitle'
},
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs) {
scope.showMe = false;
scope.toggle = function() {
scope.showMe = !scope.showMe;
};
}
};
});
再看页面部分:
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'> {{text}} </expander>
</div>
执行的流程是这样的:
① 指令被编译的时候会扫描到template中的模型发现有一个{{title}},
② 查找scope中是否定义:通过=与父作用域绑定,方式是传递父作用域中的属性;
我总是在这里犯糊涂,解释下这个“方式是传递父作用域中的属性”,这个在哪里用的呢?
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title'> {{text}} </expander>
</div>
看到没,指令中的属性expander-title='title',这不就是传递父作用域中的属性吗?
③ expander-title与父作用域中的title属性绑定,找到它的值“点击展开”;
④ 将title的值显示在模板中。
注意:指令中的独立作用域中的属性title是为了给下面的模板使用 的,而title所对应的值,要依据页面中指令的使用传人具体的父作用域中的属性,完成属性的绑定操作。
总之、我们可以利用angularjs为我们提供的数据绑定策略来实现从父作用域向指令中传值,这个很有用哦!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
# angularjs
# 绑定策略
# angularjs的数据绑定
# 绑定数据
# AngularJS指令中的绑定策略实例分析
# 详解angularjs中的隔离作用域理解以及绑定策略
# 详解angularJs指令的3种绑定策略
# angularjs指令之绑定策略(@、=、&)
# angularJS 中$scope方法使用指南
# AngularJS中监视Scope变量以及外部调用Scope方法
# 深入解析AngularJS框架中$scope的作用与生命周期
# AngularJs Scope详解及示例代码
# 浅谈AngularJs指令之scope属性详解
# AngularJS中scope的绑定策略实例分析
# 绑定
# 的是
# 是这样
# 都是
# 发现有
# 在这里
# 就能
# 上看
# 当我们
# 再看
# 这篇文章
# 来实现
# 可以利用
# 就在于
# 框中
# 中为
# 到该
# 很有用
# 为父
# 再点
相关文章:
如何注册花生壳免费域名并搭建个人网站?
香港网站服务器数量如何影响SEO优化效果?
宝塔面板创建网站无法访问?如何快速排查修复?
东莞专业制作网站的公司,东莞大学生网的网址是什么?
电商网站制作价格怎么算,网上拍卖流程以及规则?
大学网站设计制作软件有哪些,如何将网站制作成自己app?
南阳网站制作公司推荐,小学电子版试卷去哪里找资源好?
如何选择高效响应式自助建站源码系统?
建站之星伪静态规则如何设置?
如何获取免费开源的自助建站系统源码?
如何在Tomcat中配置并部署网站项目?
建站之星如何取消后台验证码生成?
C++如何编写函数模板?(泛型编程入门)
如何在IIS服务器上快速部署高效网站?
盐城做公司网站,江苏电子版退休证办理流程?
大同网页,大同瑞慈医院官网?
如何快速搭建安全的FTP站点?
如何通过老薛主机一键快速建站?
如何快速登录WAP自助建站平台?
专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱?
桂林网站制作公司有哪些,桂林马拉松怎么报名?
如何快速上传自定义模板至建站之星?
建站之星价格显示格式升级,你的预算足够吗?
如何零成本快速生成个人自助网站?
英语简历制作免费网站推荐,如何将简历翻译成英文?
潮流网站制作头像软件下载,适合母子的网名有哪些?
Android自定义控件实现温度旋转按钮效果
XML的“混合内容”是什么 怎么用DTD或XSD定义
制作企业网站建设方案,怎样建设一个公司网站?
,巨量百应是干嘛的?
音响网站制作视频教程,隆霸音响官方网站?
如何通过FTP服务器快速搭建网站?
制作充值网站的软件,做人力招聘为什么要自己交端口钱?
详解jQuery中基本的动画方法
如何在阿里云虚拟服务器快速搭建网站?
网站制作知乎推荐,想做自己的网站用什么工具比较好?
制作公司内部网站有哪些,内网如何建网站?
如何用低价快速搭建高质量网站?
小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊?
如何获取开源自助建站系统免费下载链接?
如何选择域名并搭建高效网站?
怎么将XML数据可视化 D3.js加载XML
如何在VPS电脑上快速搭建网站?
设计网站制作公司有哪些,制作网页教程?
网页设计与网站制作内容,怎样注册网站?
制作网站建设的公司有哪些,网站建设比较好的公司都有哪些?
如何在香港免费服务器上快速搭建网站?
建站VPS能否同时实现高效与安全翻墙?
建站之星2.7模板快速切换与批量管理功能操作指南
如何正确下载安装西数主机建站助手?
*请认真填写需求信息,我们会在24小时内与您取得联系。