菜鸟AngularJS学习之路 【第二天】。(事件绑定指令 循环输出 控制器嵌套)
学习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;
});
运行结果如下图
下面的深圳是从父控制器继承来的! 虽然都是小知识 但是不积跬步无以至千里
明天继续,稳扎稳打!! 梅神快来指点我!
标签:
相关文章
-
无相关信息