Question

我仍然开始使用角度，似乎“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-click向控制器发送DOM元素？像ngclick =“ctrl.animateStuff（[＃element1]，[＃element2]，[＃element3]）”这样的东西，所以我的控制器只需要获取参数并操纵它们，甚至不知道任何关于DOM的东西？或者可以使用指令吗？如果是这样，怎么样？

Answer 1

如果您不能使用Angular的ngAminate（因为它使用css而不需要DOM操作），您可以构建自定义directive。指令是允许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>

Answer 2

要立即取消阻止，您可以

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

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

我不熟悉GSAP，但你应该能够将它挂钩到ngAnimate-do of do things。

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

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

2 个答案: