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

AngularJS 0003： 指令

猜你喜欢

AngularJS 0003：指令