用于简单动画的 Angular 指令答案

【问题标题】：Angular directive for simple animation用于简单动画的 Angular 指令
【发布时间】：2015-12-05 22:49:02
【问题描述】：

我有一个模板，该模板内部是带有类big-box 的div，它位于一个名为.movie-container 的div 容器内。

模板，

.movie-container
  .big-box

当用户点击.movie-container 时，我想将.big-box 元素的高度设置为300px（从0px）。

我尝试设置一个带有点击功能的指令，但它不起作用。当我单击 .big-box div 时，它不会在控制台日志中显示 click。

app.directive('big-box', [function() {
  return {
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        console.log ('click')
      });
    }
  }
}]);

所以我可以使用一些技巧。

【问题讨论】：

“它不工作”是什么意思？你有错误信息吗？还是它的行为不像预期的那样？
它的行为不符合预期。我希望当我点击.big-box div 时，控制台会记录“点击”。但这并没有发生。
您是否在视图中加载了指令？（东西链接<div big-box class="big-box">click me</div>）

标签： angularjs angularjs-directive

【解决方案1】：

用于指令的命名约定不正确。在定义自定义指令时，您必须使用驼峰式大小写。

app.directive('bigBox', [function() {   // Use camel case 
  return {
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        console.log ('click')
      });
    }
  }
}]);

在您的 html 中，您需要像这样使用它：

<div class="movie-container">
    <div big-box>  <!-- using the directive -->
       click here
    </div>
 </div>

名称必须用破折号书写，每个破折号代表指令定义中的一个大写字母。这是一个 angularjs 约定。

这是一个有效的fiddle。

【讨论】：

指令的命名部分是正确的，但是他可以把它当作类、属性或者元素来使用。
谢谢，今晚去试试。我可以在该指令中使用 jquery 来控制元素上的动画吗？
查看 angular.element docs。如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。您可能想使用 toggleClass() 或 addClass() 来创建动画。