AngularJS: инициализировать ZURB Foundation JS

Я использую как AngularJS, так и Foundation.

Чтобы инициализировать Foundation JS, вы должны сделать следующий вызов:

$(document).foundation();

Каким будет лучший способ сделать этот вызов в приложении AngularJS? Примеры кода были бы оценены.

Кроме того, если бы я должен был написать директиву вокруг компонента JS Foundation, как я могу гарантировать, что Foundation инициализирован?

Ответ 1

Вы можете $apply код, чтобы привести его в структуру Angular. Вот пример использования $rootScope с run, и это также можно было бы сделать внутри контроллера/директивы с любым $scope:

app.run(function($rootScope){
    $rootScope.$apply($(document).foundation());
});

Другая опция::

$compile($(document).foundation())($scope);

Обязательно включите службу $compile в свой контроллер/директиву, чтобы использовать ее таким образом. Например:.

app.directive('mydirective', function($compile) {
    return {
        link: function(scope, element, attrs) {
            $compile($(document).foundation())(scope);
        }
    }
});

Ответ 2

Вот мой прием, в app.js:

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

который будет повторно инициализировать Foundation при загрузке нового представления (чтобы также были инициализированы компоненты, содержащиеся в новом представлении). Таким образом, ваши контроллеры не должны знать об этом.

Ответ 3

Существует базовая поддержка angularJs для создания. Проверьте Angular Foundation.

Angular Foundation - это порт команды AngularUI, отличный проект angular -bootstrap для использования в рамках Foundation.

У него нет зависимостей, кроме самой библиотеки angular и базового CSS.

Ответ 4

Один из методов, который я использовал, - это просто добавить тег <script> в конце моего частичного/шаблона.

Таким образом, я могу настроить только новое содержимое каждого частичного - вместо того, чтобы создать js, повторно проанализируйте весь DOM.

например, в моем header.html:

<header id="app-header">
  <h1>Logo</h1>
  <dl class="accordion" data-accordion>
    <dd>
      <a href="#panel1">Panel 1</a>
      <div id="panel1" class="content">
        Loren Ipsum blah blah blah....
      </div>
    </dd>
  </dl>
</header>

<!-- add this tag on bottom of template / partial -->
<script>$('#app-header').foundation();</script>

Особенно, если ваше приложение содержит много элементов DOM на странице, это может значительно улучшить производительность.

Ответ 5

Попробуйте использовать следующий код:

app.run(function($timeout){
    $timeout(function() {
        $(document).foundation();
    }, 500);
});

Это решило мою проблему, пытаясь открыть работу фонда.

Ответ 6

Для TypeScript Angular 4 (или 2) проектов с использованием Компонентов:

В соответствии с данным сообщением в блоге объявить $как переменную в компоненте, а затем вызвать $(document).foundation(); в ngOnInit() для меня!

С Angular компоненты вводятся в DOM после Foundation загружен. Когда вы загружаете новый компонент и вводите его, Фонд не знает его там. Нам нужно сообщить Фонду повторно инициализировать и привязать снова, так что эти атрибуты будут подключены. http://justindavis.co/2017/06/15/using-foundation-6-in-angular-4/

{ import Component } from '@angular/core';

declare let $: any;      // TO ACCESS JQUERY '$' FUNCTION

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
  // other stuff here
});

export class MyComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    $(document).foundation();    // CALL foundation() INITIALIZATION FUNCTION FROM HERE
  }
}