AngularJS-study亦混点对比-01

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>
![]({{ ctrl.obj.src }})
<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，个人认为这个是比较推荐的，可以弥补第二种方式的缺憾~

AngularJS-study亦混点对比-01

推荐阅读更多精彩内容