angularJS表達式和指令

時間 2019-11-10

標籤 angularjs 表達式指令欄目 AngularJS 简体版

原文原文鏈接

主要是描述angularJS如何擴展html的：(模型後面會涉及)html

例子1：經過指令來擴展html數組

<body ng-app="myapp"> app

<div ng-init="name='luna';age=30"> spa

　　　　姓名是：<span>{{name}}</span>設計

年齡是：<span>{{age}}</span> rest

　　　加法計算： <span>{{ 100 + 10000}}</span>code

　　</div>htm

　　<div>對象

輸入價格：<input type="text" ng-model="price"/> 字符串

　　</div>

</body>

這個示例子主要是描述了angular表達式和指令是如何使用在html中的。

這些指令是angular跟視圖能鏈接起來的惟一方式，作html設計的設計者能夠專一於設計這些html模板。

固然也能夠本身定義一個指令：

例子：

var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        template : "<h3>自定義指令!</h3>"
    };
});

返回的對象中包含

{

　　restrict : "EA", // 表示指令能夠放在哪些地方

　　templateUrl : "", // html模板地址

　　templete : "", // string html模板字符串表示

}　　

<myDirective></myDirective> 這樣就至關於將定義的指令替換在html中。

ng-repeat指令能夠遍歷數據：

<p>使用 ng-repeat 來循環數組</p>

<ul>

　　<li ng-repeat="x in names"> {{ x }}

　　</li>

</ul>

</div>

相關標籤/搜索

每日一句

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