Angular Foundation Directives templateUrl Property

Question

I'm using angular-foundation ( http://pineconellc.github.io/angular-foundation/ ) that leverages angular directives for implementing Foundation things like Modals, Tabs and other front-end services.

The problem I'm having is that all of the directives have pre-populated "templateUrl" attributes that do not exist on my server. Also, because this is an external dependency managed with Bower, I can't manually update the library. I pulled out the following directive from the library:

angular.module('mm.foundation.tabs', [])
    .directive('tabset', function() {
      return {
        restrict: 'EA',
        transclude: true,
        replace: true,
        scope: {},
        controller: 'TabsetController',
        templateUrl: 'template/tabs/tabset.html',
        link: function(scope, element, attrs) {
          scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
          scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
          scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
        }
      };
    })

from my module I claim a dependency on the mm.foundation module:

angular.module('foundationDemoApp', ['mm.foundation.tabs']).controller('TabsDemoCtrl', function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2" }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };
})

I'm currently using Gulp with gulp-html2js to bundle my templates. On the github README they mention customizing templates ( https://github.com/pineconellc/angular-foundation ) something about the $templateCache, but at this point I am not sure how to change the templateUrl defined in the library to my template's location.

Any guidance on this would be greatly appreciated!

Answer 1

Since no one answered, I'll give it a shot, it'll may help you, ossys (note to any moderator, feel free to remove my answer if I'm wrong).

If you bower install ed the library, those templates should be somewhere in bower_components/angular-foundation , you should follow their example https://github.com/pineconellc/angular-foundation#customize-templates and get something like :

html2js: {
  options: {
    base: '.',
    module: 'ui-templates',
    rename: function (modulePath) {
      var moduleName = modulePath.replace('bower_components/angular-foundation', '').replace('.html', '');
      return 'template' + '/' + moduleName + '.html';
    }
  },
  main: {
    src: ['bower_components/angular-foundation/**/*.html'],
    dest: '.tmp/ui-templates.js'
  }
}
//or in gulp
gulp.src('bower_components/angular-foundation/**/*.html')
  .pipe(html2js({
    outputModuleName: 'ui-templates'
  }))
  .pipe(concat('ui-templates.js'))
  .pipe(gulp.dest('./'))

Answer 2

With $templateCache i think it is possible like this to replace the template with ur own

for tab:

<script type="text/ng-template" id="template/tabs/tabset.html" src="/path/to/your/template.html"></script>

Answer 3

Hey thank you guys for your answer and actually you both are correct.

My problem is I was thinking of the solution backwards. Rather than replacing the templateUrl parameter for each directive, in my case I instead need to rename the name of the template I'm compiling. For example....

I am using gulp and html2js to bundle my template files. Before importing angular-foundation my templates task looked something like this:

gulp.task('templates', function (cb) {

           gulp.src('path/to/tempalates/**/*.html')
             .pipe(html2js({
               outputModuleName: 'my.templates',
               base: './src/web/',
             }))
             .pipe(concat('templates.js'))
             .pipe(insert.prepend("var angular = require('angular');"))
             .pipe(gulp.dest('./src/web/'))
             .on('end', done);
         };
});

I went ahead and uploaded the html template directory from angular-foundation github repository, and put that in the path 'path/to/foundation/template'. I then updated the templates gulp task so that it would rename the 'path/to/foundation/template' path to the path that is already coded in the directive. For example, if a directive is expecting a templateUrl of 'template/tab/tabs.html' and the location of the actual template is 'path/to/foundation/template/tab/tabs.html', then the rename function would replace 'path/to/foundation' with an empty string to make the path 'template/tab/tabs.html' during the build. My final gulp task now looks like:

gulp.task('templates', function (cb) {
           gulp.src('path/to/tempalates/**/*.html','path/to/foundation/template/**/*.html'])
             .pipe(html2js({
               outputModuleName: 'my.templates',
               base: './src/web/',
               rename : function (modulePath) {
                  var moduleName = modulePath.replace('path/to/foundation/', '').replace('.html', '');
                  return moduleName + '.html';
                }
             }))
             .pipe(concat('templates.js'))
             .pipe(insert.prepend("var angular = require('angular');"))
             .pipe(gulp.dest('./src/web/'))
             .on('end', done);
         };
});

So now all my templates are built with the path that angular-foundation expects them to be at, and I'm not stuck trying to manage template paths during run time.

I hope this helps others!