html - 如何访问 2 个以上的 DOM 元素 "The AngularJS way"？

Question

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

例子: 我有一个侧边栏，我想通过单击一个按钮打开它。如果不使用硬编码的 javascript/jquery 选择器来抓取侧边栏，则无法在按钮的指令链接功能中执行此操作，我在 angularJS(硬编码 dom 选择器)中看到的东西非常不受欢迎，因为它打破了关注点分离.我想解决这个问题的一种方法是让每个我希望操作的元素都有一个属性指令，并在它的链接函数上保存一个引用，将它的元素属性保存到 dom-factory 中，这样每当一个指令需要访问它本身以外的元素时，它可以调用返回元素的 dom-factory，即使它不知道它来自哪里。但这是“Angular 方式”吗？

我这样说是因为在我当前的项目中，我使用的是硬编码的选择器，这已经很难维护了，因为我一直在改变我的 css。必须有更好的方法来访问多个 DOM 元素。有什么想法吗？

Answer 1

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

一种方法是创建一个 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();
      });
    }
  }
});

然后，按钮可以调用某个 Controller 中的函数来打开侧边栏:

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

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