微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!
学习angular.js的一些笔记想法(上)
1.data-ng-app与ng-app的区别
data-ng-app是为了h5不报错
2.ng-class
不多说就来拿例子说吧
HTML代码
js代码:
此时的变量colorChanger=false,那么!colorChanger=true,所以:‘color-changer-hiden':true;这时的div就addClass这个color- changer-hiden,当‘color-changer-hiden':false是removeClass这个color- changer-hiden累;
再比如说
$s
cope.lala =
;
rush:html;toolbar: true; auto-links: false;">
因为lala=true,所以div的class='haha';
哈哈 你懂了吗?反正我懂了哈
3.$rootScope:
首先,$scope是连接html跟javascript的纽带
我们都知道angular.js有个$scope,哈哈,那么$rootScope的意思呢,$rootScope可作用于整个应用中,是各个controller中scope的桥梁。用于rootscope定义的值,可以在各个controller中应用,$rootScope是所有$scope的最上层 $rootscope可以作用于整个应用中,是各个controller中scope的桥梁,是贯穿各个controller的
4.数据绑定
angular的数据绑定是{{}}双大括号,
HTML代码:
type= data-ng-href= href=>
js代码:
就给页面上的这个colors赋值了。
5.ng-transclude
(1)ng-transclude指明的是一个插入的位置,
(2)指令中标签里的元素先删除然后被嵌入所包含的内容所替代
好的上代码
HTML代码
js代码
app.directive(<span style="color: #800000">'<span style="color: #800000">pane<span style="color: #800000">'<span style="color: #000000">,function(){
<span style="color: #0000ff">return<span style="color: #000000"> {
restrict: <span style="color: #800000">'<span style="color: #800000">E<span style="color: #800000">'<span style="color: #000000">,transclude: <span style="color: #0000ff">true<span style="color: #000000">,s
cope: { title:<span style="color: #800000">'<span style="color: #800000">@<span style="color: #800000">'<span style="color: #000000"> },template: <span style="color: #800000">'<span style="color: #800000"><div style="border: 1px solid black;"><span style="color: #800000">' +
<span style="color: #800000">'<span style="color: #800000"><div style="background-color: gray"> {{title}}
<span style="color: #800000">' +
<span style="color: #800000">'<span style="color: #800000">
<span style="color: #800000">' +
<span style="color: #800000">'<span style="color: #800000">
<span style="color: #800000">'<span style="color: #000000">
};
});
最后的效果
<div style=<span style="color: #800000">"<span style="color: #800000">border: 1px solid black;<span style="color: #800000">">
<div style=<span style="color: #800000">"<span style="color: #800000">background-color: gray<span style="color: #800000">">我是标题
<span style="color: #000000">
我是
内容
这样看应该理解的差不多了哈
6.path
path在我用到的时候的功能差不多相当于a标签的href属性
7.restrict:以my-menu为例
E:element;A:attribute;C:class;M:注释的单词是啥啊,不知道为什么是M
8.directive:指令机制,上代码
>
<script src=<span style="color: #800000">"</span><span style="color: #800000">../angular-1.0.3/angular.min.js</span><span style="color: #800000">"</span>></script>
<script src=<span style="color: #800000">"</span><span style="color: #800000">HelloDirect.js</span><span style="color: #800000">"</span>></script>
appModule = angular.module(Hi there
结合7来看,就知道这个directive的指令是声明元素
9.transclude:上代码
>
<Meta http-equiv= content= />
原始的内容,
还会在这里。
<script src=<span style="color: #800000">"</span><span style="color: #800000">../angular-1.0.3/angular.min.js</span><span style="color: #800000">"</span>></script>
<script src=<span style="color: #800000">"</span><span style="color: #800000">Transclude.js</span><span style="color: #800000">"</span>></script>
appModule = angular.module(Hi there
实现的效果为
总结就是:transclude: true,js代码里面的template会在内部出现是的子标签。
10.当
js代码需要以下写法:
app.directive(
就是class里面的-线不要,js的写法是驼峰式,template是随便写的哈。
11.$location.hash():得到或者设置url里的锚点部分
URL http:
hash = "hashValue"
$location.hash([id]):这条语句是快速定位页面为[id]的元素
12.
angular.module(
.controller(<span style="color: #800000">'<span style="color: #800000">ScrollController<span style="color: #800000">',[<span style="color: #800000">'<span style="color: #800000">$s
cope<span style="color: #800000">',<span style="color: #800000">'<span style="color: #800000">$location<span style="color: #800000">',<span style="color: #800000">'<span style="color: #800000">$anchorScroll<span style="color: #800000">'<span style="color: #000000">,function ($s
cope,$location,$anchorScroll) {
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.gotoB<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om </span>=<span style="color: #000000"> function() {
</span><span style="color: #008000">//</span><span style="color: #008000"> 将location.hash的值设置为
</span><span style="color: #008000">//</span><span style="color: #008000"> 你想要滚动到的元素的id</span>
$location.hash(<span style="color: #800000">'</span><span style="color: #800000">b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om</span><span style="color: #800000">'</span><span style="color: #000000">);
</span><span style="color: #008000">//</span><span style="color: #008000"> <a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a> $anchorScroll()</span>
<span style="color: #000000"> $anchorScroll();
};
}]);
页面滚动到id='bottom'的位置。$anchorScroll();
13.angular.element(element):angular获得页面元素,上代码
leftSide=angular.element(document.querySelector());
这个代码就是把class='left-side'的dom元素拿出来咯
14.
这段代码我一开始不知道什么意思,然后就去问问小伙伴,然后就得到了很好的解决,我就不多解释了,一个链接就能解决的问题啦,上链接
14:ng-include用于包含外部的文件
就是这个div里面是用于展示myFile.html的这个文件内容
15.当html上有{{person}},然后js是$scope.person.name='wenwen'
那么页面上得到的效果就是:{'name':'wenwen'}一个json对象,哈哈
16.$watch:是一个scope函数,用于监听模型变化,当你的模型部分变化时它会通知你
每个参数的说明如下:
watchExpression:监听的对象,它可以是一个angular表达式如
<span style="color: #800000">'<span style="color: #800000">name<span style="color: #800000">',或
函数如function(){<span style="color: #0000ff">return<span style="color: #000000"> $s
cope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值),oldValue(旧值),scope(作用域的引用)
objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值,那么你应该使用它
上代码
用了$watch监听input:ng-model='expr'的变化,然后parseExpr随着变化呗
17.数据绑定
<
Meta charset=
>
<div ng-app=<span style="color: #800000">""
>
名字 : ng-model=>
Hello {{name | uppercase}}