AngularJS 世界------Angularjs指令的使用方式和自定义指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 内置指令AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 <div ng-app="" ng-init="blogname='艾斯博弈'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="blogname"></p> <p>你输入的为: {{ blogname}}</p> </div>
数据绑定数据绑定是angularjs有一个重要的特性 重复 HTML 元素ng-repeat 指令会重复一个 HTML 元素: <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> </div>
总结以上几个指令 ng-app 指令ng-app 指令定义了 AngularJS 应用程序的 根元素。 ng-init 指令ng-init 指令为 AngularJS 应用程序定义了 初始值。 ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。 ng-repeat 指令ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。 创建自定义的指令除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 <body ng-app="myApp">
<iceboy-directive></iceboy-directive>
<div iceboy-directive></div>
<div class="iceboy-directive"></div>
<!-- directive: iceboy-directive -->
<script> var app = angular.module("myApp",[]); app.directive("iceboyDirective",function() { return { restrict : "EACM",replace : true,template : "<h1>MySelf-Directive!</h1>" }; }); </script>
</body>
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |