2

I'm using angular 1.x with es6 and webpack, following this tutorial: http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/.

The author requires templates through template: require('./home.html').

I want to inject a template into a component via a controller through this method, but it's not working:

export default class MyController {
    constructor() {
        this.templateUrl = require('./templates/foo.html');
    }
}

export const myComponent = {
    bindings: {
        templateUrl: '<'
    },
    template: '{{$ctrl.templateUrl}}'
}

This renders the html as a string, e.g. <p>Some template</p>. I imagine there must be an easy way to remedy this problem without having to use ng-bind-html.

I've also tried: 

export default class MyController {
    constructor() {
        this.templateUrl = './templates/foo.html';
    }
}

export const myComponent = {
    bindings: {
        templateUrl: '<'
    },
    template: require('{{$ctrl.templateUrl}}')
}

results in Cannot find module "{{$ctrl.panelUrl}}".

jsindos
  • 459
  • 6
  • 22
  • It should be `template: require('./templates/foo.html')`. `template: '{{$ctrl.templateUrl}}'` is very inefficient and also doesn't make sense. – dfsq Aug 03 '16 at 06:26
  • The idea is to have the component as a generic wrapper for html posts. Any suggestions on best practices for this? – jsindos Aug 03 '16 at 06:39
  • This question seems to clear it up http://stackoverflow.com/questions/9381926/angularjs-insert-html-into-view – jsindos Aug 03 '16 at 06:43

0 Answers0