Question

我开始更好地学习angularJS，并且我注意到AngularJS试图强调将视图与控制器和封装分开。这方面的一个例子是人们告诉我DOM操作应该在指令中。我现在掌握了它，以及如何使用注入当前元素的链接函数来实现出色的行为功能，但这并不能解释我经常遇到的问题。

实施例：我有一个侧边栏我想通过点击按钮打开。在没有使用硬编码的javascript / jquery选择器来获取侧边栏的情况下，无法在按钮的指令链接功能中执行此操作，我在angularJS（硬编码dom选择器）中看到了非常不满意的内容因为它打破了关注点的分离。我想解决这个问题的一种方法是让我想要操作属性指令的每个元素以及它的链接函数，将它的元素属性引用到dom-factory中，以便每当指令需要时要访问除自身以外的元素，它可以调用返回元素的dom-factory，即使它不知道它来自何处。但这是＆＃34; Angular方式＆＃34;？

我之所以这么说，是因为在我目前的项目中，我使用的是硬编码的选择器，因为我不断改变我的css，这已经很难实现了。必须有更好的方法来访问多个DOM元素。有什么想法吗？

Answer 1

好吧，如果你有一个按钮的指令，你需要的元素在指令之外，你可以传递你需要切换的元素的类作为属性

<button my-directive data-toggle-class="sidebar">open</button>

然后在你的指令中

App.directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            angular.element('.' + attrs.toggleClass).toggleClass('active');
        }
    };
}

不幸的是，你不会总是将链接元素参数与你需要操作的内容相匹配。虽然有很多“有角度的方法”可以解决这个问题。

你甚至可以这样做：

<div ng-init="isOpen = false" class="sidebar" ng-class="{'active': isOpen}" ng-click="isOpen = !isOpen">
    ...
</div>

Answer 2

指令相互通信的最佳方式是通过事件。它还与关注点分离。您的按钮可以在$broadcast上$rootScope，以便所有范围都可以听到。你会发出像sidebar.open这样的事件和事件。然后侧边栏指令会监听该事件并对其采取行动。

Answer 3

有很多方法可以解决这个问题。

一种方法是创建一个创建sidebar指令，该指令响应“明确定义的”广播消息以打开/关闭侧边栏。

.directive("sidebar", function(){
  return {
    templateUrl: "sidebar.template.html",
    link: function(scope, element){
      scope.$root.$on("openSidebar", function(){
         // whatever you do to actually show the sidebar DOM content
         // e.x. element.show();
      });
    }
  }
});

然后，一个按钮可以调用某个控制器中的某个功能来打开侧边栏：

$scope.openSidebar = function(){
   $scope.$root.$emit("openSidebar");
}

另一种方法是使用$sidebar服务 - 这有点类似于$modal在angularui-bootstrap中的工作方式，但可以更简化。

如何访问超过2个DOM元素＆＃34; AngularJS方式＆＃34;？

3 个答案: