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>

    页面结果展示：    ![这里写图片描述](http://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>