我开始更好地学习angularJS，我注意到AngularJS试图强调将视图与控制器和封装分开。这方面的一个例子是人们告诉我 DOM 操作应该进入指令。我现在有点掌握了窍门，以及如何使用注入当前元素的链接函数来实现出色的行为功能，但这并不能解释我经常遇到的问题。
例： 我有一个侧边栏，我想通过单击按钮打开。如果不使用硬编码的javascript/jquery选择器来抓取侧边栏，就无法在按钮的指令链接函数中做到这一点，我在angularJS(硬编码dom选择器)中看到了这一点，因为它打破了关注点的分离。我想解决这个问题的一种方法是使我希望操作的每个元素都有一个属性指令，并在它的链接函数上，将引用它的元素属性保存到 dom-factory 中，以便每当指令需要访问自身以外的元素时，它可以调用返回元素的 dom-factory，即使它不知道它来自哪里。但这是"角度方式"吗？
我之所以这样说，是因为在我当前的项目中，我正在使用硬编码的选择器，这些选择器已经很难维护，因为我在不断更改我的 css。必须有更好的方法来访问多个 DOM 元素。有什么想法吗？
有很多方法可以解决这个问题。
一种方法是创建一个创建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服务 - 这有点类似于 angularui-bootstrap 中$modal的工作方式，但可以更简化。
好吧，如果你在按钮上有一个指令，并且你需要的元素在指令之外，你可以将需要切换的元素的类作为属性传递
<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>
指令相互通信的最佳方式是通过事件。它还保持关注点的分离。您的按钮可以$broadcast$rootScope，以便所有示波器都能听到它。你会发出和事件，如sidebar.open.然后，侧边栏指令将侦听该事件并对其执行操作。