Wscats / angular-tutorial

:rabbit:Some of the angular tutorial - 《Angular学习笔记》

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

控制器

Wscats opened this issue · comments

1.ng-src
ng-src指令里面需要{{}},其他ng指令一般只要直接写$scope所带的属性
<img ng-src="{{url}}" />

2.$rootScope
$rootScope可以实现控制器之间的数据交换,但是一旦刷新就会丢失

3.ng-style
ng-style指令,如果要用$scope传入一个css的样式表,要用json格式传递
ng-style="style"

$scope.style = {
        'border': '1px solid brown'
    };

4.ng-show
isexpand在ng-show里面不能带{{}},不然会认为永远字符串为真
<span ng-show="isexpand">...</span>
$scope.isexpand = true
当它<span ng-show="isexpand">...</span>"这样写时候为标签的属性
当它<span class="isexpand?ng-show:ng-hide">...</span>这样写的时候表现为css类

5.**ng-前缀的意思
不然DOM来解析,等到angular加载完才执行ng-自身指令
例如<img src="{{url}}" />,会先加载{{url}}地址的图片,报404错误,再等到angular解析才读取出图片
一般需用$scope把变量带到视图中的
src,href,style,class**等我们就带ng-前缀,如果不是的话,按原生写法即可

6.过滤器{{date| date:'yyyy-MM-dd hh:mm:ss EEEE'}}
date要传UNIX时间戳$scope.date = 1448864369815;

1.ng-app指令定义一个AngularJS应用程序
var app = angular.module("angularDemo", []);

2.ng-controller指令定义了应用程序控制器,控制作用域

app.controller('studentCtrl', function($scope, $rootScope) {
//数据操作
})

解决压缩的一种写法,把他整个传回调函数的过程,改写成数组的形式存放

app.controller('studentCtrl', ['$scope', '$rootScope',function($scope, $rootScope) {
//数据操作
}])

3.$scope为控制器作用域、控制范围内生效的对象,只在所在的控制器生效
$scope.wsscat = 'a';
$scope也是应用在HTML(视图)和JavaScript(控制器)之间的纽带,实现单向绑定
HTML(视图)就可以用{{wsscat}}渲染数据

4.表达式的{{}}双大括号或者’ng-bind‘
把数据绑定到HTML(视图上)

{{a}}
<p ng-bind="a">

5.管道字符(|)给表达式{{}}添加过滤器
例如{{wsscat|uppercase}},{{money|currency:'&'}}

6.ng-model输入结果,并把结果传递给对应控制器中$scope
<input ng-model="wsscat" value="" />实现双向绑定