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

Question

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

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

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

Answer 1

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

<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) {