Wscats / angular-tutorial

:rabbit:Some of the angular tutorial - 《Angular学习笔记》
387 stars 125 forks source link

控制器 #1

Open Wscats opened 8 years ago

Wscats commented 8 years ago

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;

Wscats commented 8 years ago

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="" />实现双向绑定