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 }}占位符已正确替换为＆＃34;您好。＆＃34;但是<actionBar>标签最终会出现在浏览器中，并且指令的链接功能永远不会运行。

Answer 1

在HTML中，您需要使用以下命令引用该指令：

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

而不是

<actionBar> ... </actionBar>

Angular没有检测到我的指令

1 个答案: