AngularJs:使用指令创建的表中的json对象显示数据

时间:2015-06-01 18:32:49

标签: angularjs

我创建的小提琴如下所示。问题是即使在我的dynamicContent指令中的$ compile之后,json对象的模板中的val也没有被更新。有人可以帮忙吗?

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: "tom@d.c" },
    { Fname: "chris", Lname: "Unkown", Email: "chris@d.c" },
    { Fname: "troy", Lname: "forever", Email: "troy@d.c" },
    { Fname: "bead", Lname: "trash", Email: "bead@d.c" },
];
});

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);
    }
};
});

1 个答案:

答案 0 :(得分:2)

我纠正了你的掠夺者例子:

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

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