AngularJS 本身是通过被称为指令的新属性来扩展 HTML。（比如ng-model,ng-pattern,ng-app,ng-repeat等）

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

可以使用.directive函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令，runoobDirective, 但在使用它时需要以-分割,runoob-directive:

可以通过以下方式来调用指令：
元素名(E)
属性(A)
类名(C)
注释(M 作为注释使用)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<div class="test-directive"></div>

或者<test-directive></test-directive>

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

</body>
</html>

   angular.module('myApp', [])
     .directive('myDirective', function() {
         return {
             restrict: String,
             priority: Number,
             terminal: Boolean,
             template: String or Template Function:
                 function(tElement, tAttrs) (...},
             templateUrl: String,
             replace: Boolean or String,
             scope: Boolean or Object,
             transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: //                  
                 function(tElement, tAttrs, transclude) {
                     return {
       pre: function(scope, iElement, iAttrs, controller) { ... }, 17
    post: function(scope, iElement, iAttrs, controller) { ... }
}
//   
return function postLink(...) { ... }
}
}; });

replace是个可选参数，如果设置了这个参数，值必须为true，因为默认值为false

replace是个可选参数，如果设置了这个参数，值必须为true，因为默认值为false

默认值意味着模版会被当作子元素插入到调用此指令的元素内部

scope参数是可选的，可以被设置为true或一个对象，默认值是false，当scope设置为true时，会从父作用域继承并创建一个新的作用域对象

只有指令模版中的根元素可以获得一个新的作用域

内置指令ng-controller的作用就是丛父级作用域继承并创建一个新的子作用域。它会创建一个新的丛父作用域继承而来的子作用域。

作用域的继承机制是向下而非向上进行的。

具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用并且可以避免污染所处的外部作用域或不经意污染内部作用域。

创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}.

模版就无法访问外部作用域了。

     <div ng-controller='MainController'>
         Outside myDirective: {{ myProperty }}
         <div my-directive ng-init="myProperty = 'wow, this is cool'">
             Inside myDirective: {{ myProperty }}
         </div>
</div>
     angular.module('myApp', [])
     .controller('MainController', function($scope) {
     })
     .directive('myDirective', function() {
         return {
             restrict: 'A',
             scope: {},
             priority: 100,
             template: '<div>Inside myDirective {{ myProperty }}</div>'
}; });

这里为myDirective设置了一个高优先级，由于ngInit指令会以非零的优先级运行，这个例子将会运行nginit指令，然后才是我们定义的指令，

示例

<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
  <div ng-init="myProperty = 'wow, this is cool'"></div>
  Surrounding scope: {{ myProperty }}
  <div my-inherit-scope-directive="SomeCtrl">
    Inside an directive with inherited scope: {{ myProperty }}
  </div>
  <div my-directive>
    Inside myDirective, isolate scope: {{ myProperty }}
  <div>
  <script>
    angular.module('myApp', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        scope: {}
      };
    })
    .directive('myInheritScopeDirective', function() {
      return {
        restrict: 'A',
        scope: true
      };
    })
  </script>

</body>
</html>

运行结果：

Surrounding scope: wow, this is cool
Inside an directive with inherited scope: wow, this is cool
Inside myDirective, isolate scope:

angular指令

results matching ""

No results matching ""