Extract templates to template folder

[rmtuckerphx]

i would like to use the FireUser directives with Ionic framework and would like templates externalized so that they can be changed.

[Jon-Biz]

Would it make more sense to make the controllers standalone, so they can be required or specified?

[Jon-Biz]

In the current version of FireUser, the directive controllers have been extracted and can now included via require or controller in your directive. The documentation has yet to be updated. Will this solve your issue?

[rmtuckerphx]

That is a partial solution. I could write my own directive with a different template. What I like better is the approach taken at https://github.com/angular-ui/bootstrap where the directive and controller make up the component and the template is external. You could then have different folders under the template folder for bootstrap 2, bootstrap 3, ionic or any other CSS framework. Part of the configuration would be the path to template folder.

[rmtuckerphx]

Here are samples of the updated directives that use externalized templates:

angular.module('fireUser', ['firebase'])
.constant('FireUserDefault', {
redirectPath:'/',
datalocation:'data',
userdata:'user',
iconCss:'fontawesome',
templatePath:'template/bootstrap3'
})

.directive('fireuserlogin', ['FireUserValues', function(FireUserValues) {
return {
scope:{
type:'@'
},
replace: true,
templateUrl: FireUserValues.templatePath + '/fireuser-login.html',
controller:'fireuserloginCTRL',
link: function ($scope,element,attr,ctrl) {
if(FireUserValues.iconCss === 'fontawesome'){
element.addClass('fa fa-'+attr.type);
} else {
element.text = 'Log In with ' + attr.type;
}
},
restrict: 'E'
};
}])

.directive('fireuserlogout', ['FireUserValues', function(FireUserValues) {
return {
scope:{
type:'@'
},
replace: true,
templateUrl: FireUserValues.templatePath + '/fireuser-logout.html',
controller:'fireuserlogoutCTRL',
restrict: 'E'
};
}])

.directive('fireuserloginform', ['$compile', '$http', '$templateCache', 'FireUserValues', function ($compile, $http, $templateCache, FireUserValues) {
return {
scope:{},
restrict:'E',
controller:'fireuserloginformCTRL',
link:function ($scope,element,attr,ctrl) {
var tplUrl = FireUserValues.templatePath + '/fireuser-login-form.html';

   $http.get(tplUrl, {cache: $templateCache}).success(function(tplContent){
       element.replaceWith($compile(tplContent.trim())($scope));
    });
}

};
}])

.directive('fireusersignupform', ['$compile', '$http', '$templateCache', 'FireUserValues', function ($compile, $http, $templateCache, FireUserValues) {
return {
scope:{},
restrict:'E',
controller:'fireusersignupformCTRL',
link:function ($scope,element,attr,ctrl) {
var tplUrl = FireUserValues.templatePath + '/fireuser-signup-form.html';

   $http.get(tplUrl, {cache: $templateCache}).success(function(tplContent){
       element.replaceWith($compile(tplContent.trim())($scope));
    });
}

};
}])