你的第一個指令

我們的第一個元素指令不會做太多:它只會計算 2+2 並將在 html 中呼叫,如下所示:

<my-calculator></my-calculator>

請注意,該指令的名稱是 myCalculator(在 CamelCase 中),但在 html 中它用作 my-calculator(在 lisp-case 中)。

由於我們希望將指令用作 html 元素,因此我們將使用 restrict: 'E'

每個指令都有一個將被編譯和插入的模板。我們的指令非常簡單,因此我們將 html 作為字串插入到 template 引數中。

// directives/my-calculator.js

angular.module('exampleApp', [])
.directive('myCalculator', function() {
  return {
    restrict: 'E',
    template: '<span> My directive can calculate 2+2: {{2+2}} </span>'
  };
});

HTML

<!DOCTYPE html>
<html ng-app="exampleApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="my-calculator.js"></script>
  </head>

  <body>
    Here is my first directive: 
    <my-calculator></my-calculator>
  </body>

</html>

結果將如下所示:

這是我的第一個指令:我的指令可以計算 2 + 2:4

如果你想玩實時示例,請訪問 plunkr