角度模板文件中的Bootstrap JS无效

Question

Is there a way to have bootstrap js directives (inline tag attributes) work within a angular template file?

All JS libs are correctly loaded, including the js init code for using popovers. The angular template is correctly loaded using angular router.

All the bootstrap js functions fail to be run/detected in angular templates, is there something i'm doing wrong or is this expected, and is there a way to get it working without changing the html (I looked at angular bootstap ui, but it requires rewriting the html)

Super simplified:
Twig template:

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

Angular template:

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

Angular 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

I would most certainly use the Angular Bootstrap Directive. I've never seen it done any other way. This will give you access to the typical bootstrap CSS as well as the interactive functions in the angular bootstrap. I also prefer to use 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'
                }   
             }             
          })

And then make sure to inject the router into your controller.

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