全国咨询热线:400-123-4567

小程序发布流程_详解angularJs中自界说directive的数

类别:企业动态 发布时间:2021-01-12 浏览人次:

详解angularJs中自定义directive的数据交互       这篇文章主要介绍了详解angularJs中自定义directive的数据交互,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离。后者我暂时没接触,但数据交互部分却是一样的。所以举几个前者的例子,以备以后忘记。

directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope。例子如下:

 body ng-app="myApp" ng-controller="myCtrl" 
 test-directive /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 $scope.data = {
 name:"白衣如花"
 .directive("testDirective",function(){
 return {
 restrict:"E",
 template:" h1 {{data.name||'未定义'}} /h1 "
 /script 
 /body 

显示结果为:白衣如花,可以知道directive中的data.name就是myCtrl控制器中的$scope.data.name。 

  那么封闭的directive呢?怎么封闭,封闭效果是什么样的,封闭后怎么数据交互?这些都是我这几天摸索的东西。

 body ng-app="myApp" ng-controller="myCtrl" 
 test-directive /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 $scope.data = {
 name:"白衣如花"
 .directive("testDirective",function(){
 return {
 restrict:"E",
 scope: {},
 template:" h1 {{data.name||'未定义'}} /h1 "
 /script 
 /body 

结果显示为:未定义。所以在directive定义时,添加属性scope就可以把directive的作用域和父控制器的作用域分离开来。

好,了解了开放和封闭之后,进入主题,如何进行数据交互。个人觉得数据交互分为:父控制器获取directive的变量;directive获取父控制器的变量;父控制器调用directive的函数;directive调用父控制器的函数。

1.父控制器获取directive的变量。比如封装了一个输入框接受用户输入,父控制器点击搜索按钮要获取用户输入:

 body ng-app="myApp" ng-controller="myCtrl" 
 p 名字:{{outerName}} /p 
 test-directive inner-name="outerName" /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 .directive("testDirective",function(){
 return {
 restrict:"E",
 scope: {
 innerName: "="
 template:" input type='text' ng-model='innerName' placeholder='白衣如花' "
 /script 
 /body 

显示结果如下:

分析:从数据流向说起,testDirective中的一个input输入绑定在innerName中,innerName是directive私有作用域拥有的变量,外部控制器不能直接用。通过innerName: "="传递给html中的inner-name属性,

而inner-name属性则绑定在外部控制器的outerName变量中,所以最后显示在最上面的 p 标签内。上述代码等价于如下代码:

 test-directive name="outerName" /test-directive 
scope: {
 innerName: "=name"
},

由inerName: "="变成了innerName: "=name",而html属性绑定也由inner-name变成了name。

 2.directive获取父控制器的变量。这个应用场合应该挺多的,比如公共的页眉页脚,公共的展示面板等。

这个用上面例子的"="一样可以实现,于是我们知道了"="是双向绑定。但是我们要防止directive内部意外修改数据该怎么办呢?于是单向绑定"@"就出场了。

 body ng-app="myApp" ng-controller="myCtrl" 
 input type='text' ng-model='outerName' placeholder='白衣如花' 
 test-directive inner-name="{{outerName}}" /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 .directive("testDirective",function(){
 return {
 restrict:"E",
 scope: {
 innerName: "@"
 template:" p 名字:{{innerName}} /p " +
 " button ng-click='innerName=innerName+1' 点击 /button "
 /script 
 /body 

值得注意的是:@在html的属性绑定时需要{{}}开标识,而=则不用。我的理解是,对于父控制器而言,@是数据传递,而=是数据绑定,所以有这些区别。directive中加入了一个按钮用于验证修改数据后

父控制器是否发生改变,结果是=有变化,@无变化,很容易得出结论:=是双向绑定,@是双向绑定。

 3.directive调用父控制器的函数。应用场合,暂时想不到(汗)。

变量用= 。例子如下:

 body ng-app="myApp" ng-controller="myCtrl" 
 p 名字:{{outerName}} /p 
 test-directive on-click="click(name)" /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 $scope.click = function (name) {
 $scope.outerName = name || "白衣如花";
 .directive("testDirective",function(){
 return {
 restrict:"E",
 scope: {
 onClick: " "
 template:" input type='text' ng-model='innerName' placeholder='白衣如花' " +
 " button ng-click='onClick({name: innerName})' 点击 /button "
 /script 
 /body 

数据传递流程和之上的例子差不多,唯一要注意的是参数传递时,{name: innerName}前者是形参,后者是实参。多个参数时,参数顺序不重要,形参一一对应。

4.父控制器调用directive的函数。这个是前段时间遇到的难点,情况较其他复杂一些。应用场合也很普遍,比如初始化,重置等。

 body ng-app="myApp" ng-controller="myCtrl" 
 button ng-click="click()" 重置 /button 
 test-directive action="action" /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 $scope.action = {};
 $scope.click = function () {
 $scope.action.reset();
 .directive("testDirective",function(){
 return {
 restrict:"E",
 scope: {
 action: "="
 template:" input type='text' ng-model='name' placeholder='白衣如花' ",
 controller: function ($scope) {
 $scope.action.reset = function () {
 $scope.name = "白衣如花"
 /script 
 /body 

又一次用到了=,利用了js中函数也是属性的原理。似乎,理解了=的双向绑定,就很容易调用directive内部函数了。但是初始化呢?

首先想到的是类似的=来引用传递:

 body ng-app="myApp" ng-controller="myCtrl" 
 test-directive action="action" /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 $scope.action = {};
 $scope.action.init();
 .directive("testDirective",function(){
 return {
 restrict:"E",
 scope: {
 action: "="
 template:" input type='text' ng-model='name' placeholder='白衣如花' ",
 controller: function ($scope) {
 $scope.action.init = function () {
 $scope.name = "白衣如花"
 /script 
 /body 

但是运行却发现,错误显示$scope.action.init is not a function,看提示应该是运行到第7行的时候,$scope.action.init函数还未定义。怎么办呢?把directive提到controller之前试试?一样是错误。

嗯,可以不用函数,直接在directive的controller中执行$scope.name = "白衣如花",似乎很完美,但如果是有参数的初始化呢?事实上js分离后,我遇到的问题是根据http请求的返回结果来初始化directive,由于

网络快慢不一定,导致控件初始化时不一定有http请求的返回(没有有效的初始化参数),也不能保证http请求返回后directive已经初始化(不能用=来进行函数调用)。 

需求很明了了,如果能监控参数变化,再执行初始化,此时能保证directive已经加载,而且有有效的参数。正好angularjs提供了$watch。代码如下:

 body ng-app="myApp" ng-controller="myCtrl" 
 test-directive action="action" /test-directive 
 script 
 angular.module("myApp",[])
 .controller("myCtrl",function($scope){
 $scope.action = {name: "白衣如花"};
 .directive("testDirective",function(){
 return {
 restrict:"E",
 scope: {
 action: "="
 template:" input type='text' ng-model='name' placeholder='白衣如花' ",
 link: function (scope, elem, attrs) {
 scope.$watch(attrs.action, function (value) {
 scope.action.init();
 controller: function ($scope) {
 $scope.action.init = function () {
 $scope.name = $scope.action.name
 /script 
 /body 

这是我对于directive数据交互的粗浅理解。想要更详细了解,请参看官方文档:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

【上海网站优化】这样才能让百度中意你

您的部位: > 新闻报道新闻资讯 > 企业网站建设 > 【上海市seo优化】那样才可以让百度搜索钟意你新的一年里seo优化该怎样做才能让百度搜索钟意你,在2018有许多朋友问网编,为何一些...

2021-01-12
小程序发布流程_详解angularJs中自界说directive的数

详细说明angularJs中自定directive的数据信息互动 本文关键详细介绍了详细说明angularJs中自定directive的数据信息互动,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一...

2021-01-12
小程序界面设计模板_JavaScript自界说文本框光标

JavaScript自定文字框鼠标光标 文字框(input或textarea)的鼠标光标没法改动款式(除开根据color改动鼠标光标色调)。但小编期待本人建立自身的网站时,文字框的鼠标光标有归属于...

2021-01-12
网站推行需求剖析的根本数据目标【凡科】广州

重要词:网站实行要求分析的压根数据信息总体目标 现有 13 人访问 为何要开展网站数据信息分析?1、立即把握网站实行的实际效果,减少盲目跟风性;2、分析各种各样互联网营销推广...

2021-01-12
网站制作,专题活动网站建设

主题活动企业网站建设的要求 主题活动网站怎样反映特点,精准定位爱好群体? 主题活动网站怎样用品牌形象化的語言呈现商品的特点? 主题活动网站怎样吸引住潜在用户选购? 主题...

2021-01-12
解读《百度移动搜索建站优化白皮书》

百度搜索惊雷优化算法不久不久,又接到了百度搜索搜狗引擎建网站提升市场研究报告。以便让众多网站站长充足掌握百度搜索检索模块标准,并依据标准有效安全性基本建设网站、提...

2021-01-12
X

400-8700-617400-123-4567
企业邮箱1497847554@qq.com
官方微信