angularjs

最新推荐文章于 2024-07-22 09:52:01 发布

原创最新推荐文章于 2024-07-22 09:52:01 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了AngularJS中的核心指令，包括ng-app、ng-init、ng-model和ng-repeat等，并展示了如何使用这些指令进行数据绑定和列表循环操作。同时，还探讨了自定义指令的方法及其调用方式。

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。ng-app 指令定义了 AngularJS 应用程序的根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序

ng-init 指令初始化应用程序数据。（不常使用）

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

ng-repeat 指令会重复一个 HTML 元素，对于集合中（数组中）的每个项会克隆一次 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>

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
  <li ng-repeat="x	in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

自定义指令：.directive 函数

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>

你可以通过元素，名，属性，类名，注释的方式来调用指令，也可限制其使用（restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。）

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",//<code style="font-size: 1em; border: 0px; margin: 0px; padding: 0px;">E</code><span style="font-size: 1em; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif;"> 作为元素名使用；</span><code style="font-size: 1em; border: 0px; margin: 0px; padding: 0px;">A</code><span style="font-size: 1em; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif;"> 作为属性使用；</span><code style="font-size: 1em; border: 0px; margin: 0px; padding: 0px;">C</code><span style="font-size: 1em; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif;"> 作为类名使用；</span><code style="font-size: 1em; border: 0px; margin: 0px; padding: 0px;">M</code><span style="font-size: 1em; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif;"> 作为注释使用</span>
        template : "<h1>自定义指令!</h1>"
    };
});