angularJs学习6：指令

发表于   |   分类于   |  

什么是指令？什么是模块？

添加一个自带的控制器

1
2
3
4
5
6
7
8
9
10
11

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

添加一个自定义的指令

1
2
3
4
5
6
7
8
9
10
11
12
<div ng-app="myApp" runoob-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

注意

  • JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
  • AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。
  • 在我们的实例中，所有 AngularJS 库都在 HTML 文档的头部载入。