1

ステージを設定するには - これは、単純な属性をバインドできる単一のスコープ内では発生しません。フェードイン/フェードアウトしたい要素はコントローラー内にありません。ng-app (rootScope) 内にあります。さらに、クリックされたボタンは、ルートから約 3 つの子の深さの子スコープにあります。

これが私が現在これを解決している方法です：

HTML (ルート スコープにある):

<ul class="nav-secondary actions" 
  darthFader fadeDuration="200" 
  fadeEvent="darthFader:secondaryNav">

darthFader は私のディレクティブです。

指令：

ディレクティブ('darthFader',

function() {
        return {
            restrict: 'A',
            link: function($scope, element, attrs) {
                $scope.$on(attrs.fadeevent, function(event,options) {
                    $(element)["fade" + options.fade || "In"](attrs.fadeduration || 200);
                });
            }
        }

})

ここでは、イベント バスを介して渡されるオプションに応じて (またはデフォルトで fadeIn/200ms に設定される)、fadeIn または fadeOut を呼び出す特定の要素に固有のイベント ハンドラーを作成しています。

次に、$rootScope からイベントをブロードキャストして、このイベントをトリガーします。

$rootScope.$broadcast('darthFader:secondaryNav', { fade: "Out"});

これは機能しますが、このディレクティブのすべてのインスタンスに対してイベント リスナーを作成することに夢中になっているわけではありません (画面上に darthFader が多すぎるとは思いませんが、それは私が確立するパターンのためです)。ビューの属性をコントローラーとディレクティブの両方のイベントハンドラーと結合することにも夢中ではありませんが、現在、secondary-nav をラップするコントローラーがないため、secondaryNav を $ にバインドする必要があります。 rootScope も好きではありません。だから私の質問：

  1. ディレクティブをインスタンス化するたびにイベント ハンドラーを作成せずにこれを行う方法はありますか? (要素のステートフルなリストを保存するサービスでしょうか?)
  2. ビュー、コントローラー、ディレクティブをどのように分離すればよいですか?
  3. 私が見逃している他の明らかな質問はありますか？

乾杯！

4

2 に答える 2

4

あなたはあなたの質問で言及します

フェードイン/フェードアウトしたい要素はコントローラー内にありません。ng-app (rootScope) 内にあります。

これと同じ機能を書くとしたら、要素を独自のコントローラーに入れると思います。コントローラーは、ビューとモデルの交差を管理する責任があります。これはまさにあなたがやろうとしていることです。

myApp.controller('NavController', function($scope) {
  $scope.fadedIn = false;
});

<ul ng-controller="NavController"
  class="nav-secondary actions" 
  darthFader fadeDuration="200" 
  fadeShown="fadedIn">

myApp.directive('darthFader', function() {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {
      var duration = attrs.fadeDuration || 200;
      $scope.$watch(attrs.fadeShown, function(value) {
        if (value)
          $(element).fadeIn(duration);
        else
          $(element).fadeOut(duration);
      });
     }
   };
});

複数のコントローラー間でフェードイン/アウトの状態を共有することが心配な場合は、この状態を共有するサービスを作成する必要があります。(また$rootScope、イベント ハンドラーを使用することもできますが、通常、共有サービスの方がデバッグとテストが簡単だと思います。)

myApp.value('NavigationState', {
  shown: false
});

myApp.controller('NavController', function($scope, NavigationState) {
  $scope.nav = NavigationState;
});

myApp.controller('OtherController', function($scope, NavigationState) {
  $scope.showNav = function() {
    NavigationState.shown = true;
  };

  $scope.hideNav = function() {
    NavigationState.shown = false;
  };
});

<ul ng-controller="NavController"
  class="nav-secondary actions" 
  darthFader fadeDuration="200" 
  fadeShown="nav.shown">

<!-- ..... -->

<div ng-controller="OtherController">
  <button ng-click="showNav()">Show Nav</button>
  <button ng-click="hideNav()">Hide Nav</button>
</div>
于 2013-05-14T05:07:36.430 に答える
0

カスタム サービスを作成し、コントローラーに挿入します。フェードイン/フェードアウトなどを行うサービスのメソッドを呼び出します。パラメータを渡して追加情報を伝えます。

于 2013-05-13T22:51:17.987 に答える