您的位置：首页 > Web前端 > AngularJS

angular 指令简述

2015-11-06 00:00 1516 查看
angularjs指令系统

在之前的例子中，我们在html标签中认识了几个ng-的属性，比如ng-app, ng-controller，他们都是angularjs指令系统中的一员，在以后的学习中，我们还会遇到更多的指令系统，他们能够方便快捷的帮助我们实现很多功能。

MVVM

通俗来讲，就是数据改变，视图就改变，视图改变，数据也跟着改变，这就是双向改变的过程。在angular中

  • 数据 指的是js声明作用域的函数中，挂载在$scope上的变量的具体值
  • 视图 指的是在html中的{{}}中的变量的呈现效果

先来看一个数据改变视图的例子
在js中，setTimeout能够延迟实现，angular中也同样对setTimeout封装了一个叫做$timeout的属性，他的用法和setTimeout一致。

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="R1">
<h4>{{name}}</h4>
</div>
</div>
</body>
<script>
function R1($scope, $timeout) {
$scope.name = "young jake";
$timeout(function() {
$scope.name = "old jake";
}, 2000);
}
</script>
</html>

两秒之后，young jake 变成 old jake.

另外一个例子，点击button，input框中的数据发生变化

  • ng-click点击事件
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="R1">
<h4>{{name}}</h4>
</div>
<div class="row" ng-controller="R2">
<div class="input-group col-xs-6 col-xs-offset-3">
<span class="input-group-btn" ng-click="text='after click.'">
<button type="button" class="btn btn-default">Change!</button>
</span>
<input type="text" class="form-control" value="{{text}}">
</div>
</div>
</div>
</body>
<script>
function R1($scope, $timeout) {
$scope.name = "young jake";
$timeout(function() {
$scope.name = "old jake";
}, 2000);
}
function R2($scope) {
$scope.text = "this is a bootstrap input-group.";
}
</script>
</html>

最后一个例子是视图改变数据的例子，在该例子中，通过改变input的值将数据中的值改变，然后将改变之后的数据在另外一个input中显示出来

  • ng-model

用来同步视图和数据内容的指令，通过该指令实现双向数据同步

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="Show">
<div class="input-group">
<span class="input-group-btn"><button type="button" class="btn btn-primary">输入</button></span>
<input type="text" class="form-control" ng-model="content" placeholder="{{default}}">
</div>
<div class="input-group">
<span class="input-group-btn"><button type="button" class="btn btn-default">显示</button></span>
<input type="text" class="form-control" value="{{content}}", placeholder="{{default}}">
</div>
</div>
</div>
</body>
<script>
function Show($scope) {
$scope.default = 'please input your content';
$scope.content = "";
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap angular.js
相关文章推荐
新的分享
章节导航