素材巴巴 > 程序开发 >

菜鸟AngularJS学习之路 【第二天】。(事件绑定指令 循环输出 控制器嵌套)

程序开发 2023-09-10 17:13:05

学习Angularjs 的第二天 ,感觉进步很慢,但是要稳扎稳打不能囫囵吞枣,每个知识点都必须敲一敲才能有效果。
先来回顾今天的第一个 事件绑定指令
首先按照书上写的例子 绑定的是最常见的 click事件 代码如下:
html:

    

js:

printApp.controller("printController",function ($scope) {alert("羊肉面,牛肉面,刀削面,炸酱面,热干面,羊肉面,二狗下面");
 });

点击按钮以后会弹出梅哥的爱吃的所有面! 感觉和jquery事件绑定也差不多,Angularjs 通过指令来完成绑定操作。个人觉得是很大程度上让控制器能够保持精简!angualarjs一再强调不能呢个污染全局应用域js中的window 和angularjs中的顶级对象$rootscope。言归正传,和click事件一样 其他事件click事件一样可以在控制器里面得到处理。showMenu()方法也可以传值这和js里面是一样的。

事件这一块目前看来还算简单,还没看到比较复杂的情况。当然还有很多方面没有接触到 这里只是先简单的了解用法。

接下来是循环输出指令:ng-repeat 个人觉得和ASP.NET里面的repeater控件很像,都是用来输出同样的结构不同的值,不过ng-repeat指令简单方便的多,ng-repeat可以接受一个数组或者对象来作为数据源 下面是我写的例子,在上面的事件指令上拓展了一下

数组例子:

html:

梅哥想吃{{ noodles }}

js

printApp.controller("printController",function ($scope) {$scope.showMenu=function () {$scope.menu=["牛肉面","刀削面","炸酱面","热干面","羊肉面","二狗下面"];};
 });

运行结果如图:

这里写图片描述

其实看起来很简单 h1 里面 就是一个循环去遍历我们指定的数据源,个人是这么觉得的 但是内部怎么实现的暂时不知道。我们再来看一个对象的例子

js:

printApp.controller("printController",function ($scope) {$scope.showMenu=function () {$scope.menu={one:"牛肉面",two:"羊肉面"};};
 });

运行结果:

这里写图片描述

可见改变js的数据源以后 得到的结果都是一样的!用$ng-repeat

3.控制器嵌套

最后是控制器的嵌套,控制器的嵌套和dom元素的嵌套是一样的 在实际代码中确实也是在嵌套的元素中指定了不一样的控制器 ,嵌套以后就和原型继承一样 子控制器是可以访问到父控制器的属性和方法(就是继承到了这些属性和方法)

html

梅哥在{{ city }}吃面

梅哥住在{{ address }}

js

fatherApp.controller("fatherController",function ($scope) {$scope.city="深圳";
 });fatherApp.controller("childController",function ($scope) {$scope.address=$scope.city;
 });

运行结果如下图

这里写图片描述

下面的深圳是从父控制器继承来的! 虽然都是小知识 但是不积跬步无以至千里

明天继续,稳扎稳打!! 梅神快来指点我!


标签:

上一篇: querySelectorAll()和querySelector() 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。