时间:2021-05-28
前言
我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去。
一、首先回顾一下有哪些绑定策略?
看这个实在是有点抽象了,我们来看具体的实例分析吧!
二、简单的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>", };});页面中使用标签部分示例:
分析我们在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/>' };});页面部分:
从结果上看,三个输入框中的内容互不影响,因为都是新的独立作用域,能够完成从视图到模型的绑定。
三、Expander示例
首先看控制器代码:
再看页面部分:
执行的流程是这样的:
① 指令被编译的时候会扫描到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为我们提供的数据绑定策略来实现从父作用域向指令中传值,这个很有用哦!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、概述相信大家在日常开发中,在SQL语句中经常需要进行字符串拼接,以sqlserver,oracle,mysql三种数据库为例,因为这三种数据库具有代表性。s
环境:python3.464bitpycharm2018社区版64bitOracle1164bitSQLServer·Mysql其中三种不同的数据库安装在不同的
数据处理中经常遇到表连接问题,本次介绍R语言中三种左连接方法,这三种是等价的,不过会有时间快慢问题,斟酌使用。法一:>data0data1data2%left_
在JavaScript中有三种声明变量的方式:var、let、const。下文给大家介绍js中三种定义变量的方式const,var,let的区别。1.const
本文主要讲mysql中三种删除表的操作,delete语句、truncate语句以及drop语句的区别:简介delete1、删除整张表的数据:deletefrom