我對使用AngularJS進行項目工作感興趣。我已經閱讀了很多內容，觀看了視頻，完成了幾個示例應用程序。這一切都有道理，我購買了這些概念。使用帶有d3.js和DOM效果的AngularJS/AngularUI

我正在做的項目需要做一些DOM特殊效果（動態地在頁面周圍移動東西等），併合並一些D3.js圖表。

我已經用了很多jQuery;我明白並喜歡它。我已經足夠使用AngularJS來獲得基礎知識。我完全不明白如何在Angular中調用諸如jQuery的$("#my-element").slideUp()之類的東西。例如：

比方說，我有一個頁面下面的HTML某處：

<!-- somewhere in app.html --> 
<div id="my-element"> 
    <p>Here's some data about your stuff...!</p> 
    <button id="hider">Hide this (but with a cool transition)</button> 
</div>

而在現場記者：

// somewhere in app.js ... pretend it's all nice and DRY. 
    function main() { 
    $("#my-element button") 
     .click(function() { $("#my-element").slideUp()}); 
    }  
    $(main);

我可以告訴大家如何接近有所建樹最好這對角是：

HTML

<!-- somewhere in app.html --> 
<div ng-controller="Data"> 
    <p>Here's some data about your stuff...!</p> 
    <button ng-click="slideUp()">Hide this (but with a cool transition)</button> 
</div>

CSS：

// somewhere in app.css 
function Data ($scope) { 
    $scope.slideUp = function() { 
    $("#my-element").slideUp(); 
    } 
}

不知怎的，感覺就像是不正確的做法，但我不知道正確的方法是什麼。

我看到有一個看起來很整潔的AngularUI項目......但「文檔」假設讀者對Angular非常熟悉，而不是新手。

我完全願意購買Angular的想法，即HTML的數據綁定的聲明性語法是要走的路，我願意全力以赴並採用風格，慣例或其他任何方式。但我不知道如何開始使用簡單的演示文稿。

有人點我到使用的示例項目（最好演示瞭如何使用的）：

AngularJS
jQuery的

獎金，如果有D3的一些提=）我不要特別關心jQuery-UI，但它並不會傷害我。

注

我看到this question，但答案是，同樣，不是很對初來乍到角有幫助。

來源

2012-12-07 Sir Robert

檢查我對這個問題的答案http://stackoverflow.com/questions/13103671/how-to-integrate-flot-with-angularjs。這不是D3，但原則是一樣的。順便說一句，我打算寫一些關於使用D3與Angular的，讓我知道你是否有建議。 – jaime

DOM操作應該在指令中完成。我會看下面的教程。他們真的幫助我理解的概念：

AngularJS指導教程第1部分 - http://www.youtube.com/watch?v=Yg-R1gchccg 部分 - http://www.youtube.com/watch?v=nKJDHnXaKTY

最終，你也要去想知道你的控制器和指令，怎麼能溝通，爲此你想看看$ scope API：http://docs.angularjs.org/api/ng $ rootScope.Scope

您可以使用$ scope。$ broadcast發送事件，並使用$ scope.on監聽事件。

AngularJS和jQuery在一起工作得非常好 - 只是在Angular之前包含了jQuery腳本，你應該很好。

理解AngularJS中的概念需要時間，但它是一個非常全面和高效的框架。堅持下去。

來源

2012-12-07 18:15:00

在AngularJS中，如果您需要與元素交互，請求$元素。

function Data ($scope, $element) { 
    $scope.slideUp = function() { 
     $element.slideUp(); 
    } 
}

的$元素應該有所有的jQuery的功能，如果沒有，你可能需要做類似$（$元素）.slideUp（）。雖然這看起來有點草率。

完全正確的方法是使用指令，但是我使用AngularJS已經有一段時間了，這種方法應該可以正常工作。

來源

2012-12-07 18:06:52

使用帶有d3.js和DOM效果的AngularJS/AngularUI

注

回答

相關問題