d3.jsとDOMエフェクトでAngularJS/AngularUIを使用する

Question

私が取り組んでいるプロジェクトにAngularJSを使用することに興味があります。私はそれについてたくさん読んだことがあり、ビデオを見て、いくつかのサンプルアプリケーションを行った。それはすべて意味がある、私は概念に買います。

私がやっているプロジェクトでは、DOMの特殊効果（ページを動的に移動するなど）と、D3.jsのチャートを組み込む必要があります。

私はjQueryを多用しています。私はそれを取得し、それが好きです。 AngularJSを使用して基礎を得るには十分です。私は完全にjQueryの$("#my-element").slideUp()のようなものをAngular内から呼​​び出す方法を完全に理解していません。たとえば：

だが、私はどこかのページに次の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> 

とサイトJSで：

// 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をよく知っていることを前提としています。

私は、HTMLのためのデータバインディングを持つ宣言的な構文が行く方法であることを完全に喜んで思い出しています。私は全豚に行き、スタイル、慣習などを採用するつもりです。しかし、私は単純なプレゼンテーションのもの以上のもので始める方法を理解できません。 D3のいくつかの言及があります場合、私は）=

• AngularJS
• jQueryの

ボーナス：

誰かが使用しています（そして好ましく使用実証）をサンプルプロジェクトに私を指すことができます特にjQuery-UIは気にしませんが、そこにいることは私には害を与えません。

注

私はthis questionを見ましたが、答えは、再び、角度への新参者のための非常に有用ではなかったです。

Answer 1

DOM操作は指示文で行われるはずです。私は以下のチュートリアルを見ます。彼らは本当に私が概念を理解する助け：

AngularJS指令チュートリアルパート1 - http://www.youtube.com/watch?v=Yg-R1gchccg パート2 - http://www.youtube.com/watch?v=nKJDHnXaKTY

は結局あなたもあなたのコントローラやディレクティブが通信できるか疑問しようとしているが、このために、あなたが見てみたいです$ scope.APP：http://docs.angularjs.org/api/ng $ rootScope.Scope

$ scope。$ broadcastを使用してイベントを送信し、$ scope.onを使用してイベントを受信することができます。

AngularJSとjQueryは非常にうまく機能します。角度の前にjQueryスクリプトを挿入するだけでよいです。

AngularJSの概念を理解するのに時間がかかりますが、これは非常によく丸められ、生産的なフレームワークです。それを保つ。

Answer 2

AngularJSでは、要素と対話する必要がある場合は$要素を要求します。

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

それはあなたが$（$要素）.slideUp（）のような何かをする必要があるかもしれませんしない場合は$要素は、すべてのjQueryの機能を持っている必要があります。それはちょっとうんざりして見えますが。

これを行うには完全に正しい方法はディレクティブですが、AngularJSで作業してからしばらく時間がかかりましたが、このメソッドは正常に動作します。