CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
Ayman
Ayman

Reputation: 1463

ng-repeat wont work in directive template

I am trying to use ng-repeat in directive template like this:

JS

var module = angular.module("myModule", []);

module.directive('direct', function ()
{
    return {
        restrict: 'E',
        controller: "directController",
        // This HTML will replace the direct directive.
        replace: true,
        transclude: true,
        scope: {title: "@"},
        template:
            '<div>'
            // print: this is a title, which is correct
            + '{{title}}'
            + '<br>'

            // print: ["1","2","3"], which is correct
            + '{{list}}'
            + '<br>'

            // doesn't print anything, why ?!                
            + '<div ng-repeat="l in list">{{l}}</div>'
            + '</div>',

        link: function (scope, element, attrs, controller)
        {
             // scope has list in it
             console.log(scope);
        }
    }
});

module.controller('directController', ["$scope", function ($scope)
{
    $scope.list = ["1", "2", "3"];
}]);


angular.bootstrap($('html'),['myModule']);

HTML

<direct title="this is a title"></direct>

result HTML

<div>
    this is a title
    <br>
    ["1","2","3"]
    <br>
</div>

As shown above, ng-repeat doesn't print 'list', while printing list or logging it, it works fine, why :( ??

Update:

The problem was using the angular bootstrap function to register the module, since I didn't use the ng-app="myModule" directive.

If I use the ng-app="myModule" directive or inject to the var module = angular.module("ng"); module it should do the trick.

Upvotes: 0

Views: 477

Answers (2)

xam.esurk
xam.esurk

Reputation: 133

The Documention says that you have to do that on manual bootstrap:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myModule']);
});

Upvotes: 1

D.Evangelista
D.Evangelista

Reputation: 6543

Be sure to wrap the angular bootstrap in the document ready function.

$(document).ready(function() {
    angular.bootstrap($('html'),['myModule']);
});

Checkout here: http://jsfiddle.net/CRWAv/

Upvotes: 1

Related Questions