你的第一個指令

Created: November-22, 2018

我們的第一個元素指令不會做太多：它只會計算 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 。