首页手记 angular自学笔记（2）指令

angular自学笔记（2）指令

标签：

Html/CSS JavaScript AngularJS

在angular中的一下基础指令：
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-repeat 指令会重复一个 HTML 元素。
ng-model指令：

        <div ng-app="" ng-init="senait=2;senkuk=6">
            价格：<input type="text" ng-model="senait" />
            数量：<input type="text" ng-model="senkuk" />
            <p>总价： <span>{{senait * senkuk}}</span></p>
        </div>

因为{{}}与ng-model是同步的，所以能双向绑定。

ng-repeat指令：

        <div ng-app="" ng-init="names=['jions','kert','sda']">
            <ul>
                <li ng-repeat="x in names">
                    {{x}}
                </li>
            </ul>
        </div>

也可以重复遍历对象：

        <div ng-app="" ng-init="names=[
            {name:'kens',counte:'isA'},
            {name:'kens',counte:'isB'},
            {name:'kens',counte:'isC'},
            {name:'kens',counte:'isD'}]">
            <ui>
                <li ng-repeat="x in names">
                    {{x.name + '·' + x.counte}}
                </li>
            </ui>
        </div>

还有一个比较重要的自定义函数，但是看的不太懂，希望那位大神能给指点一二：
.directive 函数来添加自定义的指令
其中两种调用方法：

    <body ng-app="myApp">
        <!--/*直接调用*/-->
        <runoob-directive></runoob-directive>
        <!--/*属性调用*/-->
        <div runoob-directive></div>
    </body>
    <script type="text/javascript">
        var app=angular.module("myApp",[]);
        app.directive("runoobDirective",function(){
            return {
                template:"<h1>自定义指令</h1>"
            };
        });
    </script>

还有两种调用方法，下次再说，由于看的不是深入了解！

点击查看更多内容