AngularJS directive not showing data

Question

I have an AngularJS directive, my goal is to loop the data with a custom directive (From a factory).

 app.directive('exampleDirective', function ($scope, TestProvider, TestFactory) {
return {
    restrict: 'E',
    template: '<span></span>',
    replace: true,
    link: function(scope, elm, attrs) {
        // loop thru data and display
        console.log(TestFactory.dataReturn());                       
    }
};
})

Template

<div ng-app="myApp" ng-controller="myCtrl" >
    <div >


    </div>


    <hello></hello>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>

            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="dat in dunData">
                <td>{{dat.Name}}</td>
                <td>{{dat.Surname}}</td>

            </tr>

    <example-directive>{{message}}</example-directive>  
        </tbody>
    </table>
</div>

AngularJS Code:

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

app.controller('myCtrl', function ($scope, TestProvider, TestFactory) {http://jsfiddle.net/Jack113/28msb4y2/#fork
    $scope.test = [
        TestProvider.dataReturn(),
];

    $scope.dunData = TestFactory.dataReturn();
    $scope.message ="Fun";
});
        app.factory('TestFactory', function () {
    return {
        dataReturn: function () {
            return [{ Name: "Jack", Surname: "Du Plooy" }, { Name: "Lukas", Surname: "Van Staden" }, { Name: "Siswe", Surname: "Mok" }, { Name: "Frikkie", Surname: "Schimm" }, { Name: "Nomfundo", Surname: "Yoss" }, { Name: "Anthony", Surname: "Palmer" }]
        }
    };
});
app.provider('TestProvider', function () {

    this.name = 'Riaaan';

    this.$get = function () {
        var name = this.name;
        return {
            dataReturn: function () {
                return "Hello, " + name + "!"
            }
        }
    };

    this.setName = function (name) {
        this.name = name;
    };
});
app.directive('exampleDirective', function ($scope, TestProvider, TestFactory) {
    return {
        restrict: 'E',
        template: '<span></span>',
        replace: true,
        link: function(scope, elm, attrs) {

            console.log(TestFactory.dataReturn());                       
        }
    };
});

http://jsfiddle.net/Jack113/66ymvvgy/

Why won't data show up in the template for this directive?

Pankaj Parkar · Accepted Answer · 2015-07-23 13:03:55Z

3

Directive function gets executed at right after config & run phase gets executed.

Cycle

Config Phase
Run Phase
Directive Function
Other execution.

Demo of above sequence

You can not inject $scope dependency inside directive function, $scope could be available in link / controllerfunction it can not be available at compile time.

Code

app.directive('exampleDirective', function (TestProvider, TestFactory) {

Working Fiddle

edited Jul 23, 2015 at 13:03

answered Jul 23, 2015 at 12:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Jack Over a year ago

yes thank you, im still learning and that was valuable, information

Pankaj Parkar Over a year ago

@Jack Glad to help you..Thanks :)

Collectives™ on Stack Overflow

AngularJS directive not showing data

Template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Template

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related