replaceWith not working for div ng-include

Question

i have a div having replace-with custom directive.

 <div class="timeline" layout="row" ng-repeat="event in ::vm.events">
     <div replace-with='{{event.content}}'></div>
</div>

This is my directive:

(function () {
    'use strict';

    angular
        .module('app')
        .directive('replaceWith', replaceWith);

    /* @ngInject */
    function replaceWith() {
        // Usage:
        //
        // Creates:
        //
        var directive = {
            link: link,
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs) {
            attrs.$observe('replaceWith', function (value) {
                if (value) {
                    element.replaceWith(angular.isUndefined(value) ? '' : value);
                }
            });
        }
    }
})();

My Controller from where i am getting content data:

 vm.templateUrl = "scripts/controllers/sample.content.html";
 vm.events = [{
            title: 'Title1',
            subtitle: '',
            date: '6/6/2016',
            image: 'assets/avatar-5.png',
            content: '<div ng-include="vm.templateUrl"></div>',
            palette: ''
        }]

Here my div with replace-with attribute is not getting replaced with ng-include template.but when i hard code my content data like content:<p>Sample Data</p> it's working. can someone please help me with this.

Try `(document).ready(function(){}` instead of `(function()` — BradTheBrutalitist, Jun 07 '16 at 21:25
@BradTheBrutalitist:i did not get you. which function you are talking about. — Venkat, Jun 07 '16 at 21:34
out of curiosity, why do you need a directive for this? couldn't you simply use ng-include in the HTML template? — Larry Turtis, Jun 07 '16 at 21:34
I'm not very good with jQuery but i thought it starts out with `(document).ready(function()` instead of `(function()` — BradTheBrutalitist, Jun 07 '16 at 21:37
@LarryTurtis:Well i have lot of events on vm.events and each event contains different html or image.so i want one custom directive to replace content. — Venkat, Jun 07 '16 at 21:41
take a look at this solution: http://stackoverflow.com/questions/21835471/angular-js-directive-dynamic-templateurl — Larry Turtis, Jun 07 '16 at 22:30

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

One approach is to use the templateURL property of the directive and make it dynamic, as described in the top answer to this question:

Angular.js directive dynamic templateURL

edited May 23 '17 at 12:08

Community

1
1

answered Jun 08 '16 at 14:57

Larry Turtis

1,907
13
26

i appreciate your help . will try above solution. – Venkat Jun 08 '16 at 15:45

replaceWith not working for div ng-include

1 Answers1