欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS入门心得之directive和controller通信过程

程序员文章站 2022-04-28 21:00:46
angularjs 通过新的属性和表达式扩展了 html。angularjs学习起来也非常的简单。 1.angularjs是何方神圣 angular js (angul...

angularjs 通过新的属性和表达式扩展了 html。angularjs学习起来也非常的简单。

1.angularjs是何方神圣

angular js (angular.js) 是一组用来开发web页面的框架、模板以及数据绑定和丰富ui组件。它支持整个开发进程,提供web应用的架构,无需进行手工dom操作。

angularjs是为了克服html在构建应用上的不足而设计的。html是一门很好的为静态文本展示设计的声明式语言,但要构建web应用的话它就显得乏力了。这里angularjs就应运而生,弥补了html的天然缺陷,用于构件web应用等。

2.如何了解angularjs

angularjs诞生于2009年,由misko hevery 等人创建,后为google所收购。

angularjs官网 : http://www.angularjs.org (一般来说会被墙掉,所以可以访问下面的网站)

angularjs中文网站 : http://www.ngnice.com

书籍 :《angularjs 权威教程》《用angularjs开发下一代web应用》等。个人意见,for your information

备注 :视频教程,最近有看过大漠老师的angularjs教程,觉得还不错,但是感觉没有一点基础还是听不懂的,或者要看好几遍(不是做广告)

3.为什么要了解angularjs

一项新技术能够面世,为众人所知,从而脱引而出,定然不是空穴来风,肯定有其标新立异的过人之处,主要有以下几点:

(1)mvc的思想(或者是mvvm)

(2)模块化和依赖注入

(3)双向数据绑定

(4)指令

每一个特性都可以大篇幅的展开,显然,目前能力不够,没法展开,有兴趣可以网上搜下,大体了解。

今天主要来说说angularjs的三个指令“ @ ”,“ = ”,“ & ”的用法和区别(这个问题困扰了我大半天,和frank交流多次,我才明白)

1.指令作用域中的@

作用是把当前属性作为字符串传递。

先上代码,前台界面:

<!doctype html>
<html ng-app="mymodule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="myctrl">
<drink water="{{purewater}}"></drink>
</div>
</body>
<script src="../js/angular.js">
<script src="scopeat.js"></script>
</html>

js代码:

var mymodule = angular.module("mymodule", []);
mymodule.controller('myctrl', ['$scope', function($scope){
$scope.purewater="纯净水";
}])
mymodule.directive("drink", function() {
return {
restrict:'ae',
scope:{
water:'@'
},
template:"<div>{{water}}</div>"
}
});

执行的结果平淡无奇,却暗藏玄机: 

AngularJS入门心得之directive和controller通信过程

(1) html页面中,声明一个标签<drink></drink>,其中定义一个属性名:water 属性值:purewater(这里的{{}}是angularjs的一种常见表达式,类似于ng-model,用于值绑定)

(2) js文件中,首先从模块开始,然后创建一个控制器行2~行4,再定义一个指令,主要实现的是将"<drink></drink>"替换为"<div>{{water}}</div>"标签显示

(3) 重点介绍这里的

scope:{
water:'@'
}

该表达式等价于:

link:function(scope,element,attrs){
scope.water=attrs.water;
}

具体含义就是在指令的scope上定义一个属性名:water,它的值就是前台界面中water属性的值,也就是"{{purewater}}";

同时{{purewater}}的值我们从声明的控制器可以看出:

$scope.purewater="纯净水";

所以最终页面显示的是“纯净水”,主要的流程就是:

a.在指令中,通过@实现指令与html页面元素关联;

b.在控制器中又实现了与页面的联系;

c.从而借助html页面建立起控制器与指令的联系,也是一种通讯方式。

具体见下图:

AngularJS入门心得之directive和controller通信过程 

2.指令作用域中的=

作用是与父scope中的属性进行双向绑定。

<!doctype html>
<html ng-app="mymodule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="myctrl">
ctrl:
<br>
<input type="text" ng-model="purewater">
<br>
directive:
<br>
<drink water="purewater"></drink>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="scopeequal.js"></script>
</html>
var mymodule = angular.module("mymodule", []);
mymodule.controller('myctrl', ['$scope', function($scope){
$scope.purewater="纯净水";
}])
mymodule.directive("drink", function() {
return {
restrict:'ae',
scope:{
water:'='
},
template:'<input type="text" ng-model="water"/>'
}
});

这里=的手段类似,通过页面设置两个输入框,分别代表指令和控制器的作用域,在js代码实现了双向绑定,做到了控制器与指令在各自作用域内能够影响对方,也就是双向通信,具体思路与@类似,不赘述,上图:

AngularJS入门心得之directive和controller通信过程

3.指令作用域中的&

主要作用是传递一个来自父scope的函数,稍后调用。

<!doctype html>
<html ng-app="mymodule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="myctrl">
<greeting greet="sayhello(name)"></greeting>
<greeting greet="sayhello(name)"></greeting>
<greeting greet="sayhello(name)"></greeting>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="scopeand.js"></script>
</html>
var mymodule = angular.module("mymodule", []);
mymodule.controller('myctrl', ['$scope', function($scope){
$scope.sayhello=function(name){
alert("hello "+name);
}
}])
mymodule.directive("greeting", function() {
return {
restrict:'ae',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="username" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:username})">greeting</button><br/>'
}
});

从页面可以看出,这里定义了一个标签<greeting></greeting>,并在其中定义了属性名greet,与上面的@以及=不同的是,属性名后面是一个方法,所以,这里的&主要用于在controller和directive之间传递函数,实现两者之间的函数通信,在js中,将前台的greeting标签替换为template中的内容,一个输入框加上一个按钮,按钮上绑定了greet函数,与前台页面的greet相呼应,而前台的greet函数在控制器中有定义,所以指令中也是调用的控制器中的greet函数。执行结果如下:

(1)初始界面

AngularJS入门心得之directive和controller通信过程 

(2)在第一个文本框填值

AngularJS入门心得之directive和controller通信过程 

(2)在第二个文本框填值

AngularJS入门心得之directive和controller通信过程 

(3)在第三个文本框填值

AngularJS入门心得之directive和controller通信过程