AngularJs : Displaying data from json object inside table created using directives

Question

The fiddle I have created is given below..the issue is that the val in template of json object is not being updated even after $compile inside my dynamicContent directive. Can someone help?

http://jsfiddle.net/hyvz75cz

var app = angular.module('app', []);

app.controller('fieldController', function ($scope) {

$scope.columns = [
    { label: "First Name", name: "Fname", template: "<div>{{val}}</div>" },
    { label: "Last Name", name: "Lname", template: "<div>{{val}}</div>" },
    { label: "Email", name: "Email", template: "<div>{{val}}</div>" }
];

$scope.data = [
    { Fname: "Tom", Lname: "Assassin", Email: "[email protected]" },
    { Fname: "chris", Lname: "Unkown", Email: "[email protected]" },
    { Fname: "troy", Lname: "forever", Email: "[email protected]" },
    { Fname: "bead", Lname: "trash", Email: "[email protected]" },
];
});

app.directive('dynamicHeader', function ($compile) {
return {

    restrict: 'E',
    replace: true,
    scope: { model : '='},
    template: '<div>{{model.label}}</div>',
    link: function (scope, element) {
        $compile(element)(scope);
    }
};
});

app.directive('dynamicContent', function ($compile) {
return {

    restrict: 'E',
    replace: true,
    scope: {
        model: '=',
        val: '='
    },
    template: '<div>{{model}}</div>',
    link: function (scope, element) {
        $compile(element)(scope);
    }
};
});

This is much more usable for others than the original text; just having the code snippets here makes it much more clear that your issue is with a directive, and the title change helps as well. — Claies
– Claies, Commented Jun 2, 2015 at 1:51

Lucas L Roselli · Accepted Answer · 2015-06-01 21:58:41Z

2

I corrected your plunker example:

http://jsfiddle.net/hyvz75cz/5/

    scope: {
        model: '=',
        val: '='
    },
    template: '',
    link: function (scope, element) {
        element.append(scope.model);
        $compile(element.contents())(scope);
    }

answered Jun 1, 2015 at 21:58

Lucas L Roselli

2,8301 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lucas L Roselli Over a year ago

@Claies sorry to bother you, but I corrected his example on plunker, he was almoust there, so I did't felt the need to explain what was missing, and I'm pretty sure that I helped him

Lucas L Roselli Over a year ago

ok @Claies go ahead and click on the negative button I don't mind, but I found a lot of answers by not reading what was writen , but just clicking on the fiddle example, but don't worry, this is a free community , feel free to do what ever you want

Tom Over a year ago

Thanks! It solved the problem :) @Claies You are right on your part, but the question cannot be framed without the external link. Please do suggest how I could improve my question in a way that would benefit others.

Collectives™ on Stack Overflow

AngularJs : Displaying data from json object inside table created using directives

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related