javascript - 创建模态指令，并在 Angular js 中绑定(bind)点击事件

Question

我对 AngularJS 完全陌生，我可能错过了很多概念。我正在尝试为我的应用程序创建一个模态指令，但有些问题让我感到困惑，那就是如何与该指令交互。

我正在使用 yeoman，它使用以下方式生成模态指令:

yo angular:directive modal --coffee

所以我的指令目录中有这段代码:

angular.module('myApp')
  .directive('modal', () ->
    templateUrl: 'views/partials/modal.html'
    restrict: 'E'
    link: (scope, element, attrs) ->
      console.log 'link --test'
  )

现在在我的 modal.html 部分中，我插入了一个 anchor 标记，它将处理点击并提醒我一些事情。

<div><a href="" ng-click="foo()">Click Me</a></div>

现在我应该把 foo 函数放在哪里？

我尝试过类似的方法，但没有成功

angular.module('myApp')
  .directive('modal', () ->
    templateUrl: 'views/partials/modal.html'
    restrict: 'E'
    link: (scope, element, attrs) ->
      console.log 'link --test'
    controller: ($scope) ->
       $scope.foo = () ->
         console.log 'clicked that anchor'
  )

另一个问题，我做得对吗？我的意思是创建模态指令是否正确？或者指令以不同的方式使用？

Answer 1

将 foo() 放在指令 Controller 中效果很好。而且你走在正确的轨道上。指令是 Angular 中推荐进行 DOM 操作的位置 - 因此模式对话框是指令的一个很好的用例。

确保您的 html 初始化 Angular 并使用如下指令:

<div ng-app="myApp">
    <modal></modal>
</div>

这是一个working fiddle使用您的代码加上上面的html(为了简单起见，我直接使用了模板)。