javascript - Angular 未检测到我的指令

Question

我确信我做错了，但我正在练习自定义指令，并且不明白为什么我的指令不起作用。

这是标记:

<div ng-app="main">
  <div ng-controller="mainCtrl">
    {{ message }}
    <actionBar></actionBar>
  </div>
</div>

代码如下:

angular.module('main', [])
  .controller('mainCtrl', function ($scope) {
    $scope.message = "Hello.";
    $scope.doStuff = function (cb) {
      alert('Doing stuff...');
      cb();
    };
  })
  .directive('actionBar', function () {
    return {
      restrict: 'EA',
      replace: true,
      template: '<h1>test</h1>',
      scope: {
        doStuff: '&'
      },
      link: function (scope, element, attrs) {
        alert('test');
        scope.doStuff(function () {
          alert('callback executed');
        });
      }
    };
  });

这是一个代码笔:

http://codepen.io/Chevex/pen/hteBE/

{{ message }}占位符已正确替换为“Hello”。但是<actionBar>标签最终会出现在浏览器中，并且指令的链接函数永远不会运行。

Answer 1

在 HTML 中，您需要使用以下方式引用该指令:

<action-bar> ... </action-bar>

而不是

<actionBar> ... </actionBar>