本网站只能被运行在支持JavaScript脚本的环境中

第五节 AngularJS中的内置指令

本节介绍AngularJs中的各种内置指令。通过内置指令可以直接实现很多功能,不需要再另外书写代码。

ng-bind

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function ($scope) {
    $scope.html5 = 'HTML 5';
    $scope.css3 = 'CSS 3';
});
</script>
</head>
<body>
<div ng-controller="SampleController">
    <p>{{html5}}</p>
    <p ng-bind="css3"></p>
</div>
</body>
</html>

虽然可以使用{{}} 的代码书写方法,但是在画面打开的一瞬间由于AngularJS内部处理尚未完成,有可能直接显示{{}} 的原始形式。为了避免这种情况,推荐使用ng-bind内部指令。如果使用该指令的话,在AngularJS内部处理完成之前,元素本身不会显示。

ng-repeat

可以使用ng-repeat对数组进行遍历。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function ($scope) {
    $scope.items = [
        {key: 'hoge', value: 'HOGE'}
        ,{key: 'fuga', value: 'FUGA'}
        ,{key: 'piyo', value: 'PIYO'}
    ];
});
</script>
</head>
<body>
<ul ng-controller="SampleController">
    <li ng-repeat="item in items">{{item.key}} : {{item.value}}</li>
</ul>
</body>
</html>

取得元素序号

<li ng-repeat="item in items">{{$index}} : {{item.value}}</li>

{{$index}} 用于获取数组中的元素序号(从0开始)

设置元素的显示与隐藏

<!DOCTYPE HTML>
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-show="true">
可见
</div>
<div ng-show="false">
不可见
</div>
<div ng-hide="true">
不可见
</div>
<div ng-hide="false">
可见
</div>
<div ng-if="true">
可见
</div>
<div ng-if="false">
不可见
</div>
</body>
</html>

ng-show、ng-hide与ng-if的区别在于:ng-show与ng-hide通过设置display:none来隐藏元素,而当ng-if的条件成立时在DOM中添加元素,条件不成立时在DOM中移除元素。

设置元素的class

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function ($scope) {
    $scope.hoge = 'red solid-border';
    $scope.isRed = true;
    $scope.isDotted = true;
});
</script>
<style>
.red {
    color: red;
}
.blue {
    color: blue;
}
.solid-border {
    border: 1px solid black;
}
.dotted-border {
    border: 1px dotted black;
}
li {
    margin-top: 10px;
}
</style>
</head>
<body>
<ul ng-controller="SampleController">
    <li ng-class="hoge">hoge</li>
    <li ng-class="['blue', 'solid-border']">fuga</li>
    <li ng-class="{'red': isRed, 'dotted-border': isDotted}">piyo</li>
</ul>
</body>
</html>

可以通过表达式设置ng-class内置指令的值。

表达式的评估结果如下所示:

  • 当表达式为字符串时:可以同时设置多个class值,class与class之间使用空格分隔。
  • 当表达式为数组时:可以同时设置多个class值,使用数组存放多个class名。
  • 当表达式为对象时:对象的各属性名为class名,属性值为布尔值,当布尔值为true时对元素应用该class。

设置src属性值与href属性值

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('SampleController',function ($scope) {
    $scope.url = 'http://www.html5online.com.cn';
    $scope.imageFileName = 'sl.jpg';
});
</script>
</head>
<body  ng-controller="SampleController">
<img ng-src="{{imageFileName}}" />
<a ng-href="{{url}}">HTML 5在线</a>
</body>
</html>

将模板放置在HTML文件中

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('myHoge',function(){
    return {
        templateUrl: 'hogeTemplate'
    };
});
myApp.controller('SampleController', function($scope) {
    $scope.message = 'hoge';
});
</script>
</head>
<body ng-controller="SampleController">
    <div my-hoge></div>
</body>
</html>
<script type="text/ng-template" id="hogeTemplate">
    <h1>message = {{message}}</h1>
</script>

页面显示

DOM结构

可以通过<script type="text/ng-template" id="hogeTemplate">将模板放置在HTML文件中。

在定义指令时,需要将templateUrl指定为<script>标签的id。

在页面元素中放入模板

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.directive('myHoge',function(){
    return {
        transclude: true,
        template: '<del ng-transclude></del>'
    };
});
</script>
</head>
<body>
    <h1 my-hoge>hoge</h1>
</body>
</html>

页面显示

DOM结构

如果将transclude属性值指定为true,并不是在使用指令的元素中直接放入模板(不使用replace属性值)或使用模板替换使用指令的元素(将replace属性值设置为true),而是执行下述处理:

  1. 使用模板代替使用指令的元素的内部内容(不使用replace属性值)或代替元素本身(将replace属性值设置为true)。
  2. 将使用指令的元素的原内部内容放置在span元素中,将span元素放置在模板中使用ng-transclude内部指令的元素中。