angular 指令簡述

時間 2019-12-04

原文原文鏈接

angularjs指令系統

在以前的例子中，咱們在html標籤中認識了幾個ng-的屬性，好比ng-app, ng-controller，他們都是angularjs指令系統中的一員，在之後的學習中，咱們還會遇到更多的指令系統，他們可以方便快捷的幫助咱們實現不少功能。css

MVVM

通俗來說，就是數據改變，視圖就改變，視圖改變，數據也跟着改變，這就是雙向改變的過程。在angular中html

數據 指的是js聲明做用域的函數中，掛載在$scope上的變量的具體值
視圖 指的是在html中的{{}}中的變量的呈現效果

先來看一個數據改變視圖的例子
在js中，setTimeout可以延遲實現，angular中也一樣對setTimeout封裝了一個叫作$timeout的屬性，他的用法和setTimeout一致。angularjs

<!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.bootstrap

另一個例子，點擊button，input框中的數據發生變化app

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。