AngularJS-study亦混点对比-01
2017-02-07 本文已影响0人
Victor细节
ng-bind VS ng-bind-template
ng-bind:
<h2 ng-bind="name"></h2>
ng-bind-template
<h2 ng-bind-template="{{name}} is {{age}}"></h2>
ng-bind-template在指令中可以使用模板，显示的话必须是表达式语法,否则在这里面都是字符串
ng-include
<div ng-include="'footer.html'">
ng-include可以引入其他页面，注意一定要加'',否则会当成变量
$scope VS controller-as
$scope
controller('MainCtrl',['$scope',function($scope){
//声明一个变量
$scope.name = "Tom";
}
controller-as
视图中
<body ng-controller="MainCtrl as ctrl">
<h2>使用ctrl <span>{{ ctrl.name }}</span></h2>
控制器中
controller('MainCtrl',[function(){
//声明一个变量
var self = this;
self.name = "Tom";
}
ng-href VS ng-src
这个不多讲了，直接上代码
<a ng-href="{{ ctrl.obj.href }}" ng-bind="ctrl.obj.href"></a>
<script type="text/javascript">
angular.module('myApp',[])
.controller("MainCtrl",[function(){
var self = this;
self.obj = {
href:"http://www.baidu.com",
src:"C://Users/Administrator/Desktop/无标题.png"
}
}])
</script>
ng-show VS ng-hide
<!-- ng-show--当条件为true的时候显示 -->
<h2 ng-show="ctrl.flag">showH2</h2>
<!-- ng-hide--当条件为true的时候显示 -->
<h2 ng-hide="ctrl.flag">hideH2 </h2>
ng-class的两种用法
1、通过对象数组的方法
视图
<div ng-class="{true:'change1',false:'change2'}[className]"></div>
控制器
<script>
var app=angular.module("myModule",[])
app.controller('firstController',function($scope){
$scope.className=true;
})
</script>
实现很简单，就是当className为true的时候class为change1，相反则为change2。
但是有一点不好的只能够让一个元素拥有两种状态
2、通过key/value
视图
<div ng-class{'class1':ctrl.select1,'class2':ctrl.select2,'class3':ctrl.select3}">
hello world
</div>
控制器
angular.module('myApp',[])
.controller('MyCtrl',[function(){
var self = this;
self.select1 = true;
}]);
当select1为true的时候，class则为class1，个人认为这个是比较推荐的，可以弥补第二种方式的缺憾~
