AngularJs 指令

Posted 2020-06-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs 指令相关的知识，希望对你有一定的参考价值。

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

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

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

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

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性

ng-show 指令隐藏或显示一个 HTML 元素。<p ng-show="hour > 12">我是可见的。</p>

ng-hide 指令用于隐藏或显示 HTML 元素。

ng-include 指令来包含 HTML 内容:<div ng-include="‘myUsers_List.htm‘"></div>

自定义的指令你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， 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>你可以通过以下方式来调用指令：
- 元素名<runoob-directive></runoob-directive>
- 属性<div runoob-directive></div>
- 类名<div class="runoob-directive"></div>
- 注释<!-- 指令: runoob-directive —>限制使用
- ```
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
```
- restrict 值可以是以下几种:
  - E 只限元素名使用
  - A 只限属性使用
  - C 只限类名使用
  - M 只限注释使用
- restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令

以上是关于AngularJs 指令的主要内容，如果未能解决你的问题，请参考以下文章