AngularJS-study亦混點對比-01

weixin_33832340發表於2017-02-07
AngularJS

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，個人認為這個是比較推薦的，可以彌補第二種方式的缺憾~

相關文章