2016-11-15 5 views
0

私はAngularJSSemantic UIでサイトを作成しています。AngularJSはjQueryを使用しないSemantic UIコンポーネントを有効にします

CSSコンポーネントですべて問題はありませんが、問題が発生しています:アクティブなJavaScriptコンポーネントには、方法はありません。

例えば、私は
$('.ui.modal').modal('show'); 

これはjQueryスタイルコードによって成分を活性化することができます。今私はAngularJSにはjQueryがあります。あなたはその問題にどのように対処できますか?

jQueryフリーの方法でコンポーネントをアクティブにするにはどうすればよいですか?

(私はGitHub問題やレポは、何も答えはありませんことを確認しました。)

私がしている場合、私はちょうどSemantic UI要件のために最低限のファイルをインポートすることができますか?

答えて

0

なぜngShowngHideを使用しないのですか? 5秒間ngShow属性を持つ要素を非表示になります

<div ng-controller='ModalCtrl'> 
    <div class='ui modal' ng-show='show'> 
     <!-- Modal Contents --> 
    </div> 
</div> 

このコード:HTMLがどのように見えるかもしれないが

angular.module('MyApp').controller('ModalCtrl', function($scope, $timeout) { 
    $scope.show = false; 

    $timeout(function() { 
     $scope.show = true; 
    }, 5000); 
}); 

:これはあなたのコントローラがどのように見えるかもしれません。 5秒後にモーダルが表示されます。アニメーションを追加する場合は、$animateを使用してアニメーションを追加できます。

角度でネイティブにできることとできないことを見つける最も良い場所は、list of directives Angular providesです。あなたが探しているものが見つからない場合は、2つのオプションがあります:make your own directiveまたはインターネットで適切な指令が検索されています(すでにAngularには多くのディレクティブがあります)。一般的には、jQueryを避けて「Angular way」TMを使用してみてください。

+0

ありがとうございますが、「ng-show」、「ng-hide」は動作しないようです。 '$( '.ui.modal')。modal()'で初期化する必要がありますか? – Benyi

+0

私は助けてくれるものより少しだけコードが必要です。 [jsFiddle](https://jsfiddle.net/)や[CodePen](http://codepen.io/)が良いでしょう。 – c1moore

関連する問題