AngularJS - 动态 DOM 操作，无需在控制器中硬编码 dom id

AngularJS - Dynamic DOM manipulation without hardcoding dom id's in the controller

本文关键字：控制器 编码 id dom 动态 DOM 操作 AngularJS      更新时间：2023-09-26

我仍然开始使用 angular，似乎"Angular 方式"是将视图与控制器分开，因此，到目前为止，我在 angular 中的 DOM 操作似乎非常笨拙，因为我必须做很多手动 dom 元素选择。我的应用程序目前看起来像这样;

.HTML： 

<div ng-controller="appController as appCtrl">
    <div>
        <div id="element1"></div>
        <div id="element2"></div>
        <div id="element3"></div>
        <button ng-click="appCtrl.animateStuff()"></button>
    </div>
</div>

控制器：

app.controller('appController', ['animationFactory', 'domFactory', appControllerFunc]);
function appControllerFunc(animationFactory, domFactory) {
    This = this;
    This.animateStuff = function() {
        animationFactory.animate(domFactory.getNgElementById('element1'));
        animationFactory.animate(domFactory.getNgElementById('element2'));
        animationFactory.animate(domFactory.getNgElementById('element3'));
    }
}

工厂：

app.factory('domFactory', [domFactoryFunc]);
function domFactoryFunc() {
    var domFactoryContainer = {
        getNgElementById: function(id) {
            return angular.element(document.getELementById(id));
        }
    }
    return domFactoryContainer;
}
app.factory('animationFactory');
function animationFactoryFunc() {
    var animationFactoryContainer = {
        animate: function(ngelement) {
            // animates ngelement
        }
    }
    return animationFactoryContainer;
}

有没有办法以某种方式从视图的 ng 单击将 DOM 元素发送到控制器？像ngclick="ctrl.animateStuff([#element1]，[#element2]，[#element3]("这样的东西，所以我的控制器只需要获取参数并操作它们，甚至对DOM一无所知？或者指令可以用于此吗？如果是这样，如何？

如果你不能使用 Angular 的 ngAminate(它不需要 DOM 操作，因为它使用 css(，你可以构建一个自定义指令。指令是允许 DOM 操作的地方，你会将实际元素传递到指令中，所以不需要硬编码的 id。

但我建议遵循@NewDev的建议。

这将是指令的可能存根：

module.directive('myAnimation', function() {
  return {
    restrict: 'A',
    scope: {
      enabled: '='
    },
    link: function(scope, element) {
      // watch on enabled and start animation when set to true
    }
  }
});

和你的标记：

<div my-animation enabled='enabled'></div>
<div my-animation enabled='enabled'></div>
<div my-animation enabled='enabled'></div>
<button ng-click="enabled=true"></button>

要立即解锁您，您可以这样做 

<div id="element1" ng-click="ctrl.animateStuff($event)"></div>

这会将事件传递给您的函数，您可以从中提取 DOM 元素。

我不熟悉GSAP，但你应该能够将它与ngAnimate的做事方式联系起来。

而且，我会重复一遍 - 不要访问或对控制器中的 DOM 做出任何假设 - 您正在破坏 Angular 的最佳实践，并且经常会发现自己遇到问题和头痛。

相关文章：