你的第一个指令

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 。