angular 指令简述_angularjs

上一篇: 前端技术学习线路下一篇:Angular+Node实战之登陆注册

angular 指令简述

发布时间：2019-06-30 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了angular 指令简述，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Angularjs指令系统
在之前的例子中，我们在htML标签中认识了几个ng-的属性，比如ng-app, ng-controller，他们都是angularjs指令系统中的一员，在以后的学习中，我们还会遇到更多的指令系统，他们能够方便快捷的帮助我们实现很多功能。
MVVM
通俗来讲，就是数据改变，视图就改变，视图改变，数据也跟着改变，这就是双向改变的过程。在angular中


数据 指的是js声明作用域的函数中，挂载在$scoPE上的变量的具体值

视图 指的是在html中的{{}}中的变量的呈现效果

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

      
      
      -tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="


    
    
    Document
    
    



    
        {{name}}        
    



" tITle="" data-original-title="复制">
      
      
<!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点击事件

      
      
      this is a bootstrap input-group.";
    }


" title="" data-original-title="复制">
      
      
<!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>

脚本宝典总结

以上是脚本宝典为你收集整理的angular 指令简述全部内容，希望文章能够帮你解决angular 指令简述所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Angular Angular div post-format-gallery this

上一篇: 前端技术学习线路下一篇:Angular+Node实战之登陆注册

猜你在找的angularjs相关文章

全站导航更多

最新angularjs教程

热门angularjs教程