javascript - 使用 Angular Directive(指令)

Question

我正在学习如何使用 Angular 指令来操作我的 HTML。我对此有些怀疑。

我有我的 hideElementDirective:

var hideElementDirective = function() {

    var hideElement = {
        init: function(element) {
            element.css('display', 'none');
        }
    }

    return {
        link: function($scope, $element) {
            hideElement.init($element);
        }
    }
}

angular.module('app').directive('hideElementDirective', hideElementDirective);

在 HTML 中调用:

<hide-element-directive> This tag will disappear </hide-element-directive>

一切都很完美。

让我们增加逻辑。我有这个指示器可以切换 hide-element-directive 的状态，我应该如何命名指示器，我应该如何在指令中捕获？

例子:

<hide-element-directive> This tag will hide/show if you click in the indicator element that </hide-element-directive>

指标元素:<button> If you click me i will hide/show the hide-element-directive </button>

有什么约定吗？我应该使用 data-* 还是插入一个相关的类名，如 class="hide-element-directive-indicator"

谢谢。

Answer 1

要解决您的命名约定问题:

我认为对于这种情况没有任何既定的约定。没有使用 data-* 的约定。但一如既往，一定要遵循 best practices一般的命名!

---

我根本不会使用指令；我会使用 ngShow:

查看

<div ng-show='visible'>Starts off hidden</div>
<button ng-click='toggleVisibility()'>Toggle visibility</button>

Controller

function controller($scope) {
  $scope.visible = false;
  $scope.toggleVisibility = function() {
    $scope.visible = !$scope.visible;
  };
}