创建一个模态指令，并将click事件绑定到angular js中

Creating a modal directive, and binding click event on it in angular js

本文关键字：绑定 事件 click angular js 并将 一个 指令 模态 创建      更新时间：2024-01-24

我对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部分中，我插入了一个锚标记，它将处理单击并提醒我一些事情。

<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'
  )

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

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

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

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

这是一个使用您的代码和上面的html的工作小提琴（为了简单起见，我直接使用了模板）。

相关文章：