AngularJS - 在控制器中沒有硬編碼dom id的動態DOM操作

我仍然開始使用angular，並且似乎「事物的角度方式」是將與控制器分開，因此，我角度的DOM操作看起來非常笨重，因爲我必須做大量的手動DOM元素選擇。我的應用程序目前看起來像這樣;AngularJS - 在控制器中沒有硬編碼dom id的動態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的內容？或者可以使用指令嗎？如果是這樣，怎麼樣？

來源

2014-12-18 sgarcia.dev

你是對的 - 「對‘的事情角路’是從視圖分離控制器「 - 因此不要對控制器中的DOM做任何假設（如元素ID）。換句話說，如果你覺得你需要從控制器訪問DOM，那麼你做錯了。 – 2014-12-18 23:44:05

在我的問題中添加了更多信息，對不起，它似乎在我寫下來並從記事本複製粘貼時被剪掉 – 2014-12-18 23:48:33

閱讀有關如何在Angular中執行動畫的示例，請參見[ngAnimate]（https：// docs。 angularjs.org/api/ngAnimate）。它使用該元素，但它不在控制器中。 – 2014-12-18 23:52:52

如果您不能使用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>

來源

2014-12-19 01:10:27 orange

現在要解鎖，你可以做

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

，將事件傳遞給你的函數，你可以從中提取的DOM元素。

我對GSAP並不熟悉，但您應該能夠將其納入ngAnimate方式。

而且，我會重複自己 - 不要訪問或對您的控制器中的DOM進行任何假設 - 您打破了Angular的最佳實踐，並且經常會遇到問題和頭痛問題。

來源

2014-12-19 00:26:06

如果不是在控制器中，我應該在哪裏操縱DOM？另外，我之前使用過$ event參數，這裏的問題是我不需要調用元素，我需要它旁邊的多個項目（我知道我可以通過使用最接近的（）來獲取調用項目，但是這仍然需要DOM ID硬編碼） – 2014-12-19 00:31:15

閱讀關於[ngAnimate]（https://docs.angularjs.org/api/ngAnimate） - 這是動畫相關的DOM操作發生的地方。 – 2014-12-19 00:41:46

AngularJS - 在控制器中沒有硬編碼dom id的動態DOM操作

回答

相關問題