Bootstrap JS в файлах угловых шаблонов не работает

Question

Bootstrap JS в файлах угловых шаблонов не работает

0

Есть ли способ, чтобы директивы bootstrap js (встроенные атрибуты тегов) работали в файле углового шаблона?

Все JS-библиотеки загружаются правильно, включая код инициализации js для использования popovers. Угловой шаблон правильно загружается с помощью углового маршрутизатора.

Все функции bootstrap js не могут быть запущены/обнаружены в угловых шаблонах, есть ли что-то, что я делаю неправильно или это ожидаемо, и есть ли способ заставить его работать, не меняя html (я смотрел на угловой bootstap ui, но он требует перезаписи html)

Супер упрощено:
Шаблон Twig:

<div class="col-md-12" ng-app="builderApp"><div ng-view></div></div>

Угловой шаблон:

<i class="fa fa-info-circle" data-toggle="popover" data-content="woop woop"></i>

Угловой JS:

var builderApp = angular.module('builderApp', ['ngRoute', 'xeditable']);
    builderApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: template_path + 'root.html',
                controller: 'rootController'
            })
    }]);
    builderApp.controller('rootController', function($scope, directoryFactory) {
        $scope.directory = directoryFactory.getDirectory();
    });

mr12086 21 авг. 2015, в 11:45

Источник

0

Вы включили модуль начальной загрузки в свой модуль приложения? Вы не забыли ввести модуль?
dhavalcengg 21 авг. 2015, в 09:14
0

Извините, я пропустил создание модуля, но когда вы говорите, модуль начальной загрузки, что есть модуль начальной загрузки, который вы должны внедрить, чтобы нормальная работа начальной загрузки JS?
mr12086 21 авг. 2015, в 09:16
1

Вы хотите использовать bootstrap.js напрямую, не проходя угловой жизненный цикл. Это не будет работать, потому что весь ваш шаблон загружается асинхронно, а ваши bootstrap.js ничего об этом не знают. Лучше использовать угловую оболочку поверх начальной загрузки, как угловой интерфейс. В противном случае вы можете написать свои собственные директивы, что не рекомендуется, потому что вы должны поддерживать это. :
dhavalcengg 21 авг. 2015, в 09:21
0

Да, я так и думал, это просто боль angularui не работает с html, созданным для начальной загрузки, мне придется использовать вместо этого угловой дизайн директивы. Но если это то, что я должен сделать, то я должен :) PS Если никто не может придумать лучший ответ / решение, поставьте это как ответ и неправильно отметьте его как правильное.
mr12086 21 авг. 2015, в 09:23

Показать ещё 2 комментария

Теги:

php

angularjs

symfony

twitter-bootstrap-3

1 ответ

Ещё вопросы

Вы включили модуль начальной загрузки в свой модуль приложения? Вы не забыли ввести модуль?
Извините, я пропустил создание модуля, но когда вы говорите, модуль начальной загрузки, что есть модуль начальной загрузки, который вы должны внедрить, чтобы нормальная работа начальной загрузки JS?
Вы хотите использовать bootstrap.js напрямую, не проходя угловой жизненный цикл. Это не будет работать, потому что весь ваш шаблон загружается асинхронно, а ваши bootstrap.js ничего об этом не знают. Лучше использовать угловую оболочку поверх начальной загрузки, как угловой интерфейс. В противном случае вы можете написать свои собственные директивы, что не рекомендуется, потому что вы должны поддерживать это. :
Да, я так и думал, это просто боль angularui не работает с html, созданным для начальной загрузки, мне придется использовать вместо этого угловой дизайн директивы. Но если это то, что я должен сделать, то я должен :) PS Если никто не может придумать лучший ответ / решение, поставьте это как ответ и неправильно отметьте его как правильное.

cmgsakell · Answer 1 · 2015-08-21T12-53-00.000Z

Я бы, безусловно, использовал директиву Angular Bootstrap. Я никогда не видел, чтобы это делалось иначе. Это даст вам доступ к типичному загрузочному CSS, а также к интерактивным функциям в угловом бутстрапе. Я также предпочитаю использовать ui-маршрутизатор.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="scripts/vendors/ui-router-master/release/angular-ui-router.min.js"></script>
<script src="scripts/vendors/ui-bootstrap-tpls-0.13.0.min.js"></script>


    var app = angular.module('BuilderApp', ['ui.router','ui.bootstrap']);

    app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/login");
            $stateProvider
              .state('login', {
                  url: '/login',
                  title: 'Login',
                  templateUrl:'views/loginView.html',
                  controller: 'loginCtrl'),

              })
              .state('account', {
                  url: '/account',
                  title: 'My Account'


                  views: {
                    'navigation': {
                         templateUrl: 'views/navigationView.html',
                         controller: 'navigationCtrl'
                    },
                    'content': {
                        templateUrl: 'views/contentView.html',
                        controller: 'navigationCtrl'
                    }
                 }            
              })
            .state('account.dashboard', {
                 url:'/dashboard',
                 title: 'Dashboard',
                 views : {
                    'pageContent': {
                        templateUrl:'views/dashboardView.html',
                        controller: 'dashboardCtrl'
                }   
             }             
          })

И затем убедитесь, что вы вводите маршрутизатор в контроллер.

app.controller('navigationCtrl', function ($scope, $stateParams, $location, $state) {