包裝基礎4揭示角

新角，只是想與Zurb基金會達成一些和諧4.一個例子;我正在嘗試使用http://foundation.zurb.com/docs/components/reveal.html組件。包裝基礎4揭示角

直接方法似乎是包裝成指令：

directive('modal', function() { 
    return { 
     template: '<div ng-transclude id="notice" class="reveal-modal">' + 
        '<a close-modal></a>' + 
        '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: { 
      'done': '@', 
     }, 
     transclude: true, 
     link: function(SCOPE, element, attrs, ctrl) { 
      SCOPE.$watch('done', function (a) { 
       // close-modal 
      }); 
     } 
    } 
}). 
directive('closeModal', function() { 
    return { 
     template: '<a ng-transclude href="#" class="close-reveal-modal">x</a>', 
     restrict: 'A', 
     transclude: true, 
     replace: true 
    } 
}). 
directive('showModal', function() { 
    return { 
     template: '<a ng-transclude class="reveal-link" data-reveal-id="notice" href="#"></a>', 
     restrict: 'A', 
     transclude: true, 
     replace: true, 
    } 
});

能正常工作在一定程度上，例如，我可以使用模式從模板顯示不同的注意事項：

<modal done=""> 
    <div ng-include src="'partials/notices/' + notice + '.html'"></div> 
    </modal> 
    <select ng-model="notice" ng-options="n for n in ['notice-1', 'notice-2']"> 
     <option value="">(blank)</option> 
    </select> 
    <a show-modal>show modal</a>

但是，它變得粘滯的地方是如果我想從控制器/某個事件（例如在$watch內）觸發近模式/顯示模式。我假設我的指令需要一個控制器來觸發點擊，但是會不會很好？

來源

2013-03-08 adm

你能添加一個小提琴/ plnkr嗎？ – GFoley83 2013-03-29 13:50:23

-1

控制器不應直接觸發UI事件，也不要直接操作UI元素。所有的代碼都應該放在指令中。

你可以做的是：

綁定在指令範圍父作用域一個布爾值，並添加上的手錶。我想你已經做到了。 OR
在控制器上執行一個作用域$廣播並添加作用域$ watch關閉指令然後關閉。

來源

2013-03-29 23:19:13 Ketan

這個問題很舊，我不知道它是否適用於Reveal。但我只通過調用.foundation（）方法的角度的.RUN（）方法包裹保管箱庫成角：

app.run(function ($rootScope) { 
    $rootScope.$on('$viewContentLoaded', function() { 
     $(document).foundation(); 
    }); 
});

這對我的作品。我想你也可以創建一個指令來處理用戶交互。

來源

2014-01-05 17:14:15

包裝基礎4揭示角

回答

相關問題