0

I am working with angular ui-bootstrap. Looking thorugh the ui-bootstrap-tpls.js file, i see this snippet

.directive('accordion', function () {
  return {
    restrict:'EA',
    controller:'AccordionController',
    transclude: true,
    replace: false,
    templateUrl: 'template/accordion/accordion.html'
  };
})

Notice: templateUrl: 'template/accordion/accordion.html'.

Where is this file?? It is nowhere to be found on my computer? I assume its calling it from remote location, if so, how do i get it local so i can work on it? The greater question here is How to access ui-bootstrap built in directives so i can modify them to my liking?

1 Answer 1

1

that file is coming from the $templateCache. From Angular docs:

The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.

Adding via the script tag:

This is the content of the template

Note: the script tag containing the template does not need to be included in the head of the document, but it must be a descendent of the $rootElement (IE, element with ng-app attribute), otherwise the template will be ignored.

Here's an example:

angular.module('template/components/login.tpl.html', [])
    .run(['$templateCache', function($templateCache){
        $templateCache.put('template/components/login.tpl.html',
            '<div class="row">' +
                '<div class="col-md-4 col-md-offset-5 col-xs-12 col-xs-offset-2">' +
                    '<div>' +
                        '<label for="email">Email:</label>' +
                        '<input type="email" id="email" ng-model="user.username" class="required" name="email" autofocus />' +
                    '</div>' +
                    '<div>' +
                        '<label for="pwd">Password:</label>' +
                        '<input type="password" id="pwd" class="required" ng-model="user.password" name="pwd"/>' +
                    '</div>' +
                    '<p>' +
                        '<button id="login" class="btn btn-default" ng-click="onSubmit(user)">Login</button>' +
                    '</p>' +
                '</div>' +
            '</div>');
    }]);

I would reference 'template/components/login.tpl.html' as my templateUrl

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.