Support for `template` not just `templateUrl`

[mateatslc]

Steps to reproduce

N/A

Expected behaviour

Would be nice to have a new rz-slider-tpl directive attribute instead/along with the current rz-slider-tpl-url. That would help folks using webpack to require their custom templates upfront as usual, without the need to lube up $templateCache upfront.
So with something like this in a controller:

scope.tplt = require('./my_custom_slider_template.html');

... markup would look like this:

<rzslider rz-slider-tpl="{{ tplt }}" rz-slider-model="slider.value" rz-slider-options="slider.options">/rzslider>

Actual behaviour

Only rz-slider-tpl-url is supported.

[ValentinH]

I don't see any reason not to add it. Can you submit a PR for this?

[mateatslc]

I'll try to, as my time allows. 👍

[ValentinH]

It's up to you, I'm currently on holidays and don't have access to a computer...

[kevin-king]

Just encountered a related issue. From source code

templateUrl: function(elem, attrs) {
  //noinspection JSUnresolvedVariable
  return attrs.rzSliderTplUrl || 'rzSliderTpl.html';
},

in order to use a template url string from a controller, you need to use rzSliderTplUrl="ctrl.templateUrlValue". Was trying rz-slider-tpl-url="ctrl.templateUrlValue" for hours, but the case conversion of the attribute only occurs when looking off the directive's scope: {}, but apparently not when accessing it directly from attrs like above.

return attrs['rz-slider-tpl-url'] || 'rzSliderTpl.html'; might solve this?

[ValentinH]

@kevin-king you are probably doing something wrong because there is a working example on the demo website: "Slider with custom template to use HTML formatting for ticks"

[kevin-king]

My case is a bit different from that one. Here would be an example of the issue I ran into, using the same syntax as your site's examples:

JS

//You need to import the ngSanitize module:
angular.module('app', ['rzModule', 'ngSanitize']);

$scope.templateUrl = 'your-custom-template.html';

$scope.slider = {
  value: 100,
  options: {
    floor: 0,
    ceil: 500,
    step: 100,
    showTicksValues: true,
    translate: function(value) {
      return '<b>Price:</b> $' + value;
    }
  }
};

HTML that wont work

<rzslider rz-slider-model="slider.value"
          rz-slider-options="slider.options"
          rz-slider-tpl-url="templateUrl"></rzslider>

<rzslider rz-slider-model="slider.value"
          rz-slider-options="slider.options"
          rz-slider-tpl-url="{{templateUrl}}"></rzslider>

HTML that will work

<rzslider rz-slider-model="slider.value"
          rz-slider-options="slider.options"
          rzSliderTplUrl="templateUrl"></rzslider>

Worth mentioning that I'm using webpack with ngtemplate-loader, which is why the template url must come from the controller (because that's the only way to import html files so that they get included in your bundle). Hope that makes sense.

[flaranda]

Same case as @kevin-king here. I am using a temporary script tag with the slider template as shown in this example: https://jsfiddle.net/meu7ap6n/

[ValentinH]

Closing this for clean up. Please comment if you still need this.