angularJS 樣式相關指令

樣式相關指令：

• ng-class:寫成一個對象的形式，裏面內容爲class的名字，還需要使用true來激活。
  代碼示例：

    <style type="text/css">
    .red {background: red;}
    .yellow {color: yellow;}
    </style>
    <script src="angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>
    <script>
    var m = angular.module('myApp',['ngSanitize']);//引入相應模塊
    m.controller('Aaa',['$scope',function($scope){
        $scope.text = "hello"; 
    }]);
    </script>

    <div ng-controller="Aaa">
        <div ng-class="{red:true,yellow:true}">{{text}}</div><!--可進行多個class同時綁定，也可動態改變true，false來動態改變class-->
    </div>

    頁面結果展示：
    ![這裏寫圖片描述](https://img-blog.csdn.net/20161106112553165)

• ng-style：設置樣式
  代碼示例：

<div ng-style="{color:'red',background:'yellow'}">{{text}}</div>

頁面結果展示：

同時我們可以將style和class等的內容設置爲數據，然後將數據進行傳遞，style方法如下：

代碼示例：

<script>
    var m = angular.module('myApp',['ngSanitize']);//引入相應模塊
    m.controller('Aaa',['$scope',function($scope){
        $scope.text = "hello";
        $scope.style ="{color:'red',background:'yellow'}"  
    }]);
    </script>

    <div ng-controller="Aaa">
        <div ng-style="{{style}}">{{text}}</div><!--注意加上大括號-->
    </div>

以下均可以提高用戶體驗，當頁面未加載完時，未顯示。如同：ng-value、ng-bind

• ng-href
  代碼示例：

$scope.url = "http://www.baidu.com";

<a ng-href="{{url}}">11111</a>

• ng-src

• ng-attr-(suffix):屬性很多，通用的方法
  代碼示例：

<a ng-attr-href="{{url}}" ng-attr-title="{{title}}" ng-attr-class="{{class}}">11111</a>