Hi there,

I'm not sure whether this is a bug or if I'm missing something with dropdown toggle.

If I put a list of links as the content of my dropdown, the following two lines:

https://github.com/madmimi/angular-foundation/blob/master/src/dropdownToggle/dropdownToggle.js#L52-L53

Appear to be blocking the link clicks, which prevents the browser from navigating to other pages.

Can be easily reproduced by grabbing the demo site plunker and changing it to have the dropdown links contain hrefs:
http://plnkr.co/edit/WlutFwfrXPOMBaNUIGRq?p=preview

I'd gladly contribute with a fix if it proves to be a defect.

Thanks for your working hard to mm.foundation.

I found a problem with modal data binding:

ng-model in modal seems invalid.

I added some code on modal example, below:

http://plnkr.co/edit/IMuqwwVMjPT0q0L62jsM?p=preview

try this operation:
when input 123 on the input text, then click ok, it should show "123", but show undefined.

data-ui-view (used instead ng-animate when using ui-view) breaks when using offcanvas.

To test this do the following:

1. Clone https://github.com/janpetras/sol
2. npm install
3. See that the enter-leave animation is not working.

Now open up default.html located in server/views/layouts and remove line 14 (the cvn-top.html include).

Refresh.

Offcanvas is removed and as a result, data-ui-view (ng-animate) is working properly again.

What gives?

If I try to put a range slider inside an accordion-group tag (example here), I can't move the slider, and I always get NaN as slider's value.

I suspect the accordion events are hiding the slider events somehow. Because If I just move the range slider outside the accordion, it works fine.

Is there a way to implement dynamic alerts? I see the static examples but I'm trying to implement this code to show on success/failure of a form's validation. I have a solid beginning towards getting this running correctly but I was curious if there was something I missed or if anyone has any other ideas as to how I could get this working.

Referring to the following StackOverflow question, it seem there's not good reason defining modelMapper, viewMapper and source as local variables in the following code:

parse:function (input) {

  var match = input.match(TYPEAHEAD_REGEXP), modelMapper, viewMapper, source;
  if (!match) {
    throw new Error(
      "Expected typeahead specification in form of '_modelValue_ (as _label_)? for _item_ in _collection_'" +
        " but got '" + input + "'.");
  }

  return {
    itemName:match[3],
    source:$parse(match[4]),
    viewMapper:$parse(match[2] || match[1]),
    modelMapper:$parse(match[1])
  };
}

Is there anything I overlook?

Please update your documents to the latest version. I thought 0.1.0 was the latest one and had a bit of trouble with some components because of it.

It would be nice to support the align property in data-options on the target element, as in Foundation.

Are there any plans to add the Magellan Subnavigation in the works?

There is no data-equalizer neither data-equalizer-watch support.

I am not sure if this is the expected behaviour or not, just dropping a line in case it isn't.

Please add feature to popover, Add external templates like .html or id in document.

Hi,

Going off the demo on http://madmimi.github.io/angular-foundation/, it seems that it doesn't work in foundation 5.2 css, it did work with 5.0.2

Since it's kinda the recommended way to do things since v1.1.5, let's add this into the lib.

Hey guys!

Pawel from https://github.com/angular-ui/bootstrap here. You are doing some grant work here. Would you be interested to working more closely with us in order to not duplicate work?

We had support for Foundation on our mind for months but never had enough time / courage to do it.

In any case, if you see possibilities / interest of working together let's discuss it here.

I'm noticing the an issue when I tried out this directive. It seems to be showing all tabs in a tabset regardless of which one is active. I had to add a ng-show to hack it to work as expected.

I took a quick look at the plunker and it seems to be doing the same thing.

http://run.plnkr.co/OkLvm9VxJzOpcv9i/

The jQuery version of JoyRide allows any html within the 'li' element. It also has a final step that isn't tied to a location but shows in the middle of the browser window. Both of these features are missing in this implementation. Please add these features in.

Is there a offcanvas demo somewhere?
Couldn't find it on http://madmimi.github.io/angular-foundation/

The top bar works fine on large screens, but the javascript that accompanies it is not present in the /src/ folder. I request that it be removed from or altered in the list of supported Foundation components.

Large screens:

Small screens:

I am new to Angular, but I may take on the challenge of adding mobile support to the top bar. Is there anybody else out there working on it?

The navigation along the pages in background is not disabled when the modal is open on top of it. When the modal is opened, one can go backward and forward through the pages while the modal is still open.

Hi,

Is there a way to catch an event before an accordion will open to potentially prevent it from opening ?

I want something like this:

This is my code:

• My Site

• Menu

  <section class="top-bar-section" style="left: -100%;">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button</a></li>
      <li class="has-dropdown not-click moved">
        <a href="#">Right Dropdown</a>
        <ul class="dropdown">
          <li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section></nav>

I copied the code from tutorial.
But the drop down doesn't work with Angular. I clicked the menu button but nothing happened. I don't know if I should add any special directive. Thanks.

As suggested by @pereckerdal in #4, our directives should be prefixed in order to avoid conflicts. We're going to go with a prefix of fdn for this project.

As mentioned by @circlingthesun in #32, the code examples on the demo site bleed off the page in Firefox. Tested in Firefox 29.0.1.

Using Angular 1.2.17 I run into problems using the active attribute for tabs.

The culprit seems to be this line:
https://github.com/madmimi/angular-foundation/blob/09d18584ab6112393acae4d81a72bf5211ba7683/src/tabs/tabs.js#L206

At the point of the first invocation of this watcher, setActive is undefined - in fact, it seems to be always undefined for me.

I am not sure how the setActive function is working - it appears though that if I just comment it out, everything works fine.

Is there a way to have the offcanvas offset my content without actually putting the entirety of my content inside it?

What I mean is, in order of the offcanvas to offset the main content this has to be inside the offcanvas inner-wrap div, however, with angular, this could be difficult to implement.

I'd rather not implement my IndexController inside the OffCanvasController and every other single piece of content.

Is there a way to get the Offcanvas to push the main content to the right as it would normally do, without the need to include said content inside the offcanvas?

I currently have an index.html, a header.html and an offcanvas.html, as follows:

header.html:

<div data-ng-include="'/public/system/views/offcanvas.html'"></div> <!-- This is where the offcanvas is included, before the main navigation -->
<div class="page-header" data-ng-controller="HeaderController">
    <div class="desktop">
        <ul class="title-area">
            <li class="name">
                <h1><a ui-sref="home" mean-token="'site-title'">SOL::S</a></h1>
        </li>
    </ul>

        <section class="top-bar-section">
            <ul class="left">
                <li data-ng-repeat="item in menus.main" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
                    <a mean-token="item.link" ui-sref='{{item.link}}'>{{item.title}}</a>
            </li>
        </ul>

            <div class="account">
                <div class="text-edit">
                    <div data-ng-show="global.authenticated" mean-token-editable></div>
            </div>

                <ul class="right" data-ng-hide="global.authenticated">
                    <li><a ui-sref='auth.register'>Register</a></li>
                    <li><a ui-sref='auth.login'>Login</a></li>
            </ul>
                <ul class="right" data-ng-show="global.authenticated">
                    <li class="has-dropdown">
                        <a href="">{{global.user.name}}</a>
                        <ul class="dropdown">
                            <li><a href="/logout">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </section>
</div>
</div>

offcanvas.html

<div class="off-canvas-wrap mobile" data-ng-controller="offCanvasCtrl">
    <div class="inner-wrap">
        <nav class="tab-bar">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
        </section>

            <section class="middle tab-bar-section">
                <h1 class="title">SOL ::</h1>
        </section>
    </nav>
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><a href="#">Left Sidebar</a></li>
                <li><a href="#">Left Sidebar</a></li>
                <li><a href="#">Left Sidebar</a></li>
        </ul>
    </aside>

        <section class="main-section">
            <div class="small-12 columns">
                <h1>How to use</h1>
                <p>Just use the standard layout for an offcanvas page as documented in the <a href="http://foundation.zurb.com/docs/components/offcanvas.html">foundation docs</a></p>
                <p>As long as you include mm.foundation.offcanvas it should simply work</p>
        </div>
    </section>
        <a class="exit-off-canvas"></a>
</div>
</div>

And finally, index.html

<div class="container content" data-ng-controller="IndexController"> <!-- Main container and IndexController -->
<section> <!-- Site tag section -->
    <div class="row"> <!-- Site tag row -->
        <div class="small-12 columns">
        <h1 mean-token="'home-default'">SOL :: Search</h1>
        </div>
    </div> <!-- End site tag row -->
</section> <!-- End site tag section -->

<section> <!-- Logo section -->
    <div class="row"> <!-- Logo row -->
        <div class="small-10 columns text-center logo-container small-offset-1"> <!-- Logo column -->
            <a ui-sref="about" title="SOL"><img ng-src="{{logo}}" alt="SOL Logo"></a>
    </div> <!-- End logo column -->
</div> <!-- End logo row -->
</section> <!-- End logo section -->

<section> <!-- Search input section -->
    <div class="row"> <!-- Search row -->
        <div class="small-8 columns small-offset-2"> <!-- Search column -->
            <form>
                <div class="row collapse"> <!-- Input group -->
                    <div class="large-9 columns">
                        <input type="text" placeholder="" class="form-control main-search-input">
                </div>
                    <div class="small-3 columns">
                        <a href="#" class="button postfix main-search-button">Search</a>
                </div>
            </div>
        </form>
    </div><!-- End input group -->
</div><!-- End search column -->
</div><!-- End search row -->
</section> <!-- End search input section -->
</div> <!-- End IndexController -->

The offcanvas.html is called in the first line of the header.html via a ng-include and the header.html itself is also called with a ng-include as an attribute of the nav element (which is in the index.html on the server side).

It all works wonderfully, except that, in order for the offcanvas to push the content to the right, I would need to include all the content inside this. I'd rather not do that, is there any other way?

Hi,
Can I suggest you implement git tags so that when installing from bower (as I'm just doing) a version can be defined.

Thanks
Steve

I get this error:
GET http://netdna.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css 403 (Forbidden)

should be using foundation's css:
//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.css

When the $modal backdrop setting is true (the default), a click on the backdrop should dismiss the modal window.

Is there a reason the examples are formatted this way? I can submit a PR if there isn't...

In both latest Firefox and Chrome (OSX), the TypeAhead control allows you to select items in the dropdown with the up and down arrow keys, but does not highlight those items when pressing the up and down arrow keys. This makes it very difficult to know which (if any) item you have selected with the arrow keys.

At now angular-foundation can't support Orbit in Foundation 5.
Can you consider to support this:)

Thx:)

In commit 37e3dac the TopBar was refactored, the controller of topBarSection was removed. In hasDropdown, the code still references a function on the missing controller. See madmimi/angular-foundation@37e3dac#commitcomment-7190927

Howdie,

You've probably come across this blog post from ZURB: http://zurb.com/article/1312/the-next-foundation

How does this project relate to the upstream Foundation for Apps efforts?
Is there any cross-over or collaboration?
Do we know yet if there'll be any compatibility issues between this project and Foundation for Apps?

The deferred in the $transition module doesn't resolve when the animation ends because it relies on the css transition-end callback instead. This makes the usefulness of the promise somewhat questionable and breaks from the compatibility with the bootstrap version.

    // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
    $timeout(function() {
      if ( angular.isString(trigger) ) {
        element.addClass(trigger);
      } else if ( angular.isFunction(trigger) ) {
        trigger(element);
      } else if ( angular.isObject(trigger) ) {
        element.css(trigger);
      }
      //If browser does not support transitions, instantly resolve
      if ( !endEventName ) {
        deferred.resolve(element);
      }
    });

Would it be a good idea to replace the callback with a wrapper that resolves the promise?

I'm not sure how to address this issue for a function-trigger. Perhaps if the function returns a promise, resolve when that promise resolves, otherwise resolve immediately?

In my version of your code I have made the change to disable "backdrop click" on selected modals. I'm new to using git hub so I was not sure the best way suggest this enhancement and send you my changes. It was a simple fix.

When running Tour the CSS adds the view to the bottom of the page rather then above the element as specified in the HTML.

When I click on the tour button on http://madmimi.github.io/angular-foundation/ nothing happens. Neither in Safari nor Chrome. I'm not sure if this might be related to #37 .

Orbit is one of the most used components - need an angular directive for this

After a quick search I suppose the range slider ist not yet angularized.

Any recommendation of a component I can use instead?

Best,

Nils

Foundation supports an option to disable tooltips to not interfere with touch events. Is this supported in angular-foundation?

Also, when using tooltips on mobile, they are all styled as "bottom" tooltips (arrow on top-left of box).

http://foundation.zurb.com/docs/components/tooltips.html

Disable for touch events
If you don't want tooltips to interfere with a touch event, you can disable them for those devices, like so:

HTML
<span data-tooltip data-options="disable_for_touch:true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

Tooltips applied to tags will automatically be disabled for touch events, so not to interfere with the link.`

Your supported components list mentions Top bar but i cant find it anywhere in the repo or demos. Am I missing it or is it not available yet?

Hey,

Is it possible for someone to update the compiled version for me? This is 2-3 months old and does not seem to contain the off canvas and top-navigation elements??

Thanks

http://madmimi.github.io/angular-foundation/

When using <input type="number" step="1"> in conjunction with the mm.foundation.tour module, I get the following error:

TypeError: Object function show( scope, element, attrs ) {
    var index = parseInt( attrs.stepIndex, 10);

    if ( $tour.isActive() && index ) {
      $tour.add( index, attrs );

      if ( index === $tour.current() ) {
        if ( !isElementInViewport( ...<omitted>... } has no method 'match'

The step directive name needs to change or be prefixed in order to not collide with the existing HTML5 step attribute.

So out of box Foundation supports the ability to define tabs and tab content in separate parts of the DOM. Take this example: https://github.com/jdjkelly/quant/blob/master/app/views/sleeps/index.html.erb#L5. We see:

  <dl class="sub-header-nav-bar-tabs" data-tab>
    <dd><a href="#summary">Summary</a></dd>
    <dd class="active"><a href="#raw-data">Raw Data</a></dd>
  </dl>

Then later, separately, the content defined:

<div class="tabs-content">
  <div class="content summary" id="summary">
    <%= render 'summary' %>
  </div>
  <div class="content active raw-data" id="raw-data">
    <%= render 'raw_data' %>
  </div>
</div>

It would be nice to be able to do that in angular-foundation. I don't yet have a specific proposal, but when I do I'll link a PR to this issue.

I am a complete newbie to Angular, but it seems to me that the design of the dropdown directive in this library is broken and non-Angular-y. The specific problem that I have is that I'm trying to add a dropdown to each row in a column of a table. The code I initially wrote is this:

<tr ng-repeat="stat in stats">
  <td>
    <div id="stat_{{ stat.id }}_dropdown" class="f-dropdown">
      Hej
    </div>
    <a dropdown-toggle="#stat_{{ stat.id }}_dropdown">{{ stat.name }}</a>
  </td>
  <td>{{ stat.value }}</td>
</tr>

I was slightly uneasy with this approach even before I tried it; the globalness of ids isn't nice from a code reusability perspective. But it's not just that; the code doesn't work at all. The reason for this is that the directive attempts to retrieve stat_{{ stat.id }}_dropdown since the DOM isn't fully compiled yet and things break.

The syntax that angular-ui-bootstrap uses is this:

<li class="dropdown" ng-controller="DropdownCtrl">
  <a class="dropdown-toggle">
    Click me for a dropdown, yo!
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in items">
      <a>{{choice}}</a>
    </li>
  </ul>
</li>

This design both avoids global ids and works in a looped context.

I know this is a breaking change, but I think changing it is worth it. If you're OK with it I can prepare a PR that changes mm.foundation's dropdown to work like angular-ui-bootstrap.

Working with Bower package; angular-mm-foundation, the setup requires to install the templates then separately download build files for all directives from https://github.com/madmimi/angular-foundation/tree/gh-pages

It would be better to make and automatic setup of angular-mm-foundation without manually including it;

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-mm-foundation/mm-foundation-tpls-0.1.0.min.js"></script>
<!-- endbower -->
<!-- endbuild -->

I'm trying to use the dropdownToggle, i've built a custom angular-mm-foundation with grunt build:accordion:dropdownToggle. And when i'm trying to use a dynamic selector like this dropdown-toggle="#dropdown-example-{{toggleId}}", the Dropdown is broken.

I've done a simple sample to reproduce the issue : (By the way i'm on Angular : 1.2.9)

<!doctype html>
<html class="no-js" ng-app="app">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="lib/foundation/css/foundation.css">
    </head>
    <body ng-controller="DropdownCtrl">
        <div>          
          <a class="button split">
            Split Button
            <span dropdown-toggle="#dropdown-example-{{toggleId}}"></span>
          </a>
          <ul id="dropdown-example-{{toggleId}}" class="f-dropdown">
            <li ng-repeat="choice in items">
              <a>{{choice}}</a>
            </li>
          </ul>
        </div>

        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular-mm-foundation/dist/mm-foundation-custom-tpls.js"></script>
        <script>
            angular.module('app', ['mm.foundation']);

            function DropdownCtrl($scope) {
                $scope.toggleId = 1;
                $scope.items = [
                    "The first choice!",
                    "And another choice for you.",
                    "but wait! A third!"
                ];
            }
    </script>
    </body>
</html>

The only way i've found for the moment to correct this was to add once again the dropdown variable déclaration in the click binding of the element :

    link: function(scope, element, attrs) {
      var dropdown = angular.element($document[0].querySelector(scope.dropdownToggle));

      scope.$watch('$location.path', function() { closeMenu(); });
      dropdown.css('display', 'none').bind('click', function() { closeMenu(); });
      element.bind('click', function (event) {
        // ---> Patch here
        var dropdown = angular.element($document[0].querySelector(scope.dropdownToggle));
        // <---
        var elementWasOpen = (element === openElement);

to be consistent with angular-ui the prefix should be renamed to "ui.foundation"