How to use ui-bootstrap ?

[sylouuu]

Hi,

Trying to migrate my code from angular-strap. I removed it.

<script src="/path/to/ui-bootstrap-tpls.min.js"></script>

angular.module('app', ['ui.bootstrap']);

I tried a simple tooltip:

<a href="#" tooltip="Something">Something</a>

Error: https://docs.angularjs.org/error/$compile/multidir?p0=tooltipPopup&p1=tooltipPopup&p2=template&p3=%3Cdiv%20class%3D%22tooltip%20%7B%7Bplacement%7D%7D%22%20ng-class%3D%22%7B%20in:%20isOpen(),%20fade:%20animation()%20%7D%22%20tooltip-popup%3D%22%22%20title%3D%22%7B%7Btt_title%7D%7D%22%20content%3D%22%7B%7Btt_content%7D%7D%22%20placement%3D%22%7B%7Btt_placement%7D%7D%22%20animation%3D%22tt_animation%22%20is-open%3D%22tt_isOpen%22%3E

I'm pretty stuck and frustrated. I've downgraded angularjs to 1.2.26.

Bests

[pkozlowski-opensource]

I guess you problem is that your link is positioned close to the top as the tooltip is off the screen. The simple example I've put together seems to be working just fine:
http://plnkr.co/edit/XzK2v4fZPWiagY7iCgkW?p=preview

Hard to say more without seeing a reproduce scenario - one will be mandatory if you need further assistance: https://github.com/angular-ui/bootstrap/blob/master/CONTRIBUTING.md#you-think-youve-found-a-bug

[sylouuu]

I don't understand. In my project, I tried popover and no problem. I tried typeahead and same problem as tooltip:

Multiple directives [typeaheadPopup, typeaheadPopup] asking for template on: 

<input type="text" ng-model="contact.company_id" typeahead="company.id as company.name for company in getCompany($viewValue)" required>

$scope.getCompany = function (q) {
    if (q !== null) {
        return CompanyService.search({ company_name: q }).then(function (request) {
            return request.data.data;
        });
    }
};

Extract of my index.html:

<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/jquery/plugins/gpopover/jquery.gpopover.min.js"></script>

<script src="assets/libs/angularjs/angular.min.js"></script>
<script src="assets/libs/angularjs/angular-animate.min.js"></script>
<script src="assets/libs/angularjs/angular-sanitize.min.js"></script>
<script src="assets/libs/angularjs/angular-route.min.js"></script>

<script src="node_modules/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="node_modules/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="node_modules/satellizer/satellizer.min.js"></script>

<script src="assets/libs/angularjs/ui-bootstrap-tpls.min.js"></script>

<script src="app/app.js"></script>

In app.js:

angular.module('app', [
    // Tools
    'ngRoute',
    'oc.lazyLoad',
    'satellizer',
    'angular-loading-bar',
    'ngAnimate',
    'ngSanitize',
    'ui.bootstrap',

    // Modules
    'app.Home',
    'app.Error',
    'app.User',
    'app.Company',
    'app.Contact'
]);

[pkozlowski-opensource]

You are either including the library twice or have other 3rd party libraries that define directives with the same name, but all of those are speculations since you are not providing a minimal reproduce scenario.

We can't really help without a minimal, live reproduce scenario, see: https://github.com/angular-ui/bootstrap/blob/master/CONTRIBUTING.md#you-think-youve-found-a-bug

[sylouuu]

It's a pain to remake all my code in a plunker as it's a large app. I tried with a non-minified angularjs version.

Error: [$compile:multidir] Multiple directives [typeaheadPopup, typeaheadPopup] asking for template on: <ul class="dropdown-menu" ng-show="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;;display: block;" role="listbox" aria-hidden="{{!isOpen()}}" typeahead-popup="" id="typeahead-006-7726" matches="matches" active="activeIdx" select="select(activeIdx)" query="query" position="position">

As I can see in Chrome Dev Tools > Network > Scripts, all are loaded once, included ui-bootstrap-tpls-0.11.2.js. And why I don't have this issue with popover.

I'm coming from Angular Strap as there are too many bugs, but I didn't have this error. I'll try to make a plunkr...

[sylouuu]

@pkozlowski-opensource I finished my plunker, It worked (as I don't understand why, because I have the same code in localhost) until I've add a config module, then I have an issue in app.main.config. It doesn't recognize my constant while this behavior works in my localhost... http://plnkr.co/edit/jhhy7ZtwFFxv35a8nTvz?p=preview

The differences between this plunker and my real code is that I have many modules, many routes, many services with XHR requests.

[sylouuu]

@pkozlowski-opensource I think I've found something (exclude the config module problem). If I disable all services from lazy loading the typeahead works.

Currently:

'/contact/create': {
    templateUrl: 'app/modules/contact/views/form.html',
    controller: 'CreateFormController',
    page: {
        title: 'Create a contact',
        name: 'contact_create',
        require_auth: true
    },
    resolve: {
        lazy: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load([{
                name: 'CRM.Contact',
                files: [
                    'app/modules/contact/controllers/create_form.controller.js'
                ]
            }, {
                name: 'CRM',
                files: [
                    'app/services/contact.service.js',
                    'app/services/contact_position.service.js',
                    'app/services/contact_status.service.js',
                    'app/services/company.service.js'
                ]
            }]);
        }]
    }
},

Because my services are loaded with the CRM module, on app.main. If I use the object syntax for lazy loading, it throws the error "multipledir".

return $ocLazyLoad.load([{
    name: 'CRM.Contact',
    files: [
        'app/modules/contact/controllers/create_form.controller.js'
    ]
}, {
    name: 'CRM',
    files: [
    ]
}]);

Issue posted ocombe/ocLazyLoad#71

[pkozlowski-opensource]

@sylouuu OK, glad that you've been able to pin-point it. I guess you are aware that "lazy loading" is a (very) tricky business in the current version of AngularJS (I don't want to use the word hack but I would say current on-demand-loading solutions are close to being a hack...).

Personally I would recommend against lazy-loading the library from this repo and for sure this is something we want / plan to support.

[sylouuu]

Thank you, but I wonder how to manage a large SPA with many splitted files as I like, if you have 100+ files in your project, do you load these files one by one in your index.html, what about perf?

Bests

[pkozlowski-opensource]

@sylouuu this is a general concern with AngularJS applications and something we've got no ambitions to tackle as part of this project. But for general libraries like this one I would tend to load it up-front in index.html as it is probably used in all parts of a web app. Splitting functional code into smaller chunks is a different problematic, I agree. Unfortunately this is something that is not perfectly adressed in the current version of AngularJS.