AngularJS 0003: 指令

前端之家收集整理的这篇文章主要介绍了AngularJS 0003: 指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们知道JS的标配是html,JS需要去读写html上的属性值,来达到交互的目的。
angularJS是如何和html交互的呢?
我们看anjularjs用到了很多ng-开头的属性,这个就是它的指令,用户和html进行交互的。


比如
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="firstName='山上的白杨树'">
 	<p>在输入框中尝试输入:</p>
 	<p>召唤师名称:<input type="text" ng-model="firstName"></p>
 	<p>你输入的召唤师名称为: {{ firstName }}</p>
    </div>
</body>
</html>
结果


数据绑定
上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
绑定实现了表达式和属性值的交互。
    <!--数据绑定-->
    <div ng-app="" ng-init="kill=20;dead=5;help=5">
        <h2>战绩一览</h2>
        人头: <input type="number"	ng-model="kill">
        死亡: <input type="number" ng-model="dead">
        助攻: <input type="number" ng-model="help">
    </div>

结果

这里主要使用的是ng-model来绑定。


重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素:
   <!--重复html-->
    <div ng-app="" ng-init="names=['荒漠屠夫','德邦总管','诺克萨斯之手']">
        <p>使用 ng-repeat 来循环数组</p>
        <ul>
            <li ng-repeat="x in names">
                {{x}}
            </li>


        </ul>


    </div>
结果


对于对象数组也可以,
   <div ng-app="" ng-init="names=[
        {name:'荒漠屠夫',country:'恕瑞玛'},{name:'德邦总管',country:'德玛西亚'},{name:'诺克萨斯之手',country:'诺克萨斯'}]">
        <p>循环对象:</p>
        <ul>
            <li ng-repeat="x	in names">
                {{ x.name + ',所属阵营:' + x.country }}


            </li>


        </ul>


    </div>
结果


创建自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数添加自定义的指令。
调用自定义指令,HTML 元素上需要添加自定义指令名。
比如命名一个指令, selfCommand,但在使用它时需要以 - 隔开,self-command:
<div ng-app="myProgam">
<self-command></self-command>


<script>
    var app = angular.module("myProgam",[]);
    app.directive("selfCommand",function () {
        return {
            template: "<h1>这是自定义指令!</h1>"
        };
    });
</script>
</div>

效果





工程下载: http://download.csdn.net/detail/yysyangyangyangshan/9693807 原文链接:https://www.f2er.com/angularjs/148536.html

猜你在找的Angularjs相关文章