AngularJS 指令

最新推荐文章于 2024-05-13 14:54:25 发布

suzhisheng0105

最新推荐文章于 2024-05-13 14:54:25 发布

阅读量53

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/suzhisheng0105/article/details/89491776

版权

AngularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ng-app
ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-init, ng-model
ng-init 指令为 AngularJS 应用程序定义了初始值。通常情况下，不使用 ng-init。使用一个控制器或模块来代替它。
ng-model 指令绑定 HTML 元素到应用程序数据。ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。

绑定 HTML 元素到 HTML 表单。

<div ng-app="" ng-init="firstName='John'">
     <p>在输入框中尝试输入：</p>
     <p>姓名：<input type="text" ng-model="firstName"></p>
     <p>你输入的为： {{ firstName }}</p>
</div>

结果:
在输入框中尝试输入:
姓名: John
你输入的为: John

ng-repeat 指令会重复一个 HTML 元素

<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>

创建自定义的指令
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-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 属性,并设置值为 “A”, 来设置指令只能通过属性的方式来调用:

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

restrict 值可以是以下几种:E 作为元素名使用,A 作为属性使用,C 作为类名使用,M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

suzhisheng0105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 指令

ng-appng-app 指令定义了 AngularJS 应用程序的根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。ng-init, ng-modelng-init 指令为 AngularJS 应用程序定义了初始值。通常情况下，不使用 ng-init。使用一个控制器或模块来代替它。ng-model 指令绑定 HTML 元素到应用程序数据。ng-...
复制链接

扫一扫

专栏目录