AngularJS指令！

最新推荐文章于 2024-10-24 17:55:59 发布

XiaoQin-er

最新推荐文章于 2024-10-24 17:55:59 发布

阅读量206

点赞数

分类专栏： web 文章标签： AngularJS web

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在前面学习到了简单的AngularJS的简单代码，现在详细去介绍一下AngularJS指令：

关于AngularJS指令的问题是：

AngularJS通过指令可以去扩展Html5；带有前缀ng-。

基础的几个指令有：

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

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

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

如果想要了解更多的AngularJS指令，可以去查看：http://www.runoob.com/angularjs/angularjs-reference.html；

<div ng-app="" ng-init="firstName='John'">
<!-- 这里在登陆这个Html页面里面输入框里面会首先显示你设置的初始化值就是”John“ -->
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

算是一个数据绑定吧，在输入框里面输入了什么在你输入的为：”这里就会显示什么“；

还有一个很重要的指令，那就是可以去遍历HTML里面的元素：ng-repeat；它用在集合或者用在数组中，每一项就会克隆一次HTML元素

不多说，看下面代码：

<script src="angular.js-1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>
<!-- 
重复的话，这是x是一个变量在names这里面的集合一个个去读取！
所以最后AngularJS的表达式里面的内容是x
 -->
</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

这里x去遍历了names里面的元素，并且可以一一去显示出来；

输出结果是：

个人认为：可以看作是循环，然后再拿出来里面的数据.........

当然，除了AngularJS自身具备的一些指令，自己也可以去自定义一些指令，可以使用.directive函数来添加自定义的指令：

<script src="angular.js-1.6.4/angular.min.js"></script>

<body ng-app="myApp">

<runoob-directive></runoob-directive>
<div runoob-directive></div>
<!-- 
在自己定义了指令之后，可以通过元素名，属性，类名，注释来调用！
 在使用元素名和属性调用的时候不需要任何元素，只需要定义就好；-->
<div class="runoob-directive"></div>
<!-- directive: runoob-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>略略略</h1>"
    };
});
</script>

结果是：