AngularJs指令配置参数scope详解
AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面我只说说其中scope的配置极其含义。
scope表示指令的作用域,它有三个可选值:true、false、对象{}。
.directive("myDirective", function(){ return { restrict: "EA", scope: true/false/{}, template: "<div>{{content}}</div>" } })
true:继承父作用域且创建独立作用域;
false:继承父作用域;
{}:不继承父作用域且创建独立作用域;
当scope为非空对象时,父域和子域可以以指定的方式传递指定的数据,这就是指令与指令之间的交互。
数据传递也分三种方式:@、=、&,先看demo
<div ng-app="myModule"> <h3>请分别修改父、子作用域表单里的值</h3> <div ng-controller="myController"> 父作用域:<br/> <input type="text" ng-model="name" /><br/> <input type="text" ng-model="sex" /><br/> <input type="button" ng-click="say()" value="点击执行父域的say方法" /><br/> 子作用域:<br/> <my-directive my-name="{{name}}" my-sex="sex" get-name='say()'></my-directive><br/> </div> </div> <script type="text/javascript"> var myModule = angular.module("myModule", []); myModule.controller("myController", ['$scope', function($scope){ $scope.name = "wangmeijian"; $scope.sex = "boy"; $scope.say = function(){ alert( $scope.name +" is a"+ $scope.sex ) } }]) myModule.directive("myDirective", function(){ return { restrict: "EA", scope: { myName: "@", mySex: "=", getName: "&" }, template: "<input type='text' ng-model='myName' /><br/>"+ "<input type='text' ng-model='mySex' /><br/>"+ "<input type='button' ng-click='getName()' value='点击执行子域的say方法' />" } }) </script>
@:单向引用父域的值,传递的值必须是字符串且在指令里引用时必须加上{{}};
=:双向绑定子域和父域;
&:单向绑定父域,以便在其中运行函数
总结:scope是指令与指令之间交互,作用域之间数据互通的重要途径,是很常用也很重要的基础知识,务必要掌握。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?