grisha grisha - 1 year ago 118
AngularJS Question

Angular ng-repeat shows nothing

I am trying to display a list using ng-repeat. When used directly in html it works without issues. However, when I try to insert the same code using directive, the ng-repeat does nothing and does not show even one item.

What I tried:

  • I used the same html in both .html and .js files - in html works without issues, in directive no

  • I added
    <h1>Say Something</h1>
    just to check if the directive is applied correctly - yes, it is

  • I tried declaring the array directly in the directive (the values should be passed through scope) - no change in behaviour

  • alert(Appraisals[0].id)
    shows pop-up with correct information

  • checked for spelling and typos but everything seems correct...

The .js file:

var app = angular.module('AngularDirectiveDemo', []);
(function () {
var app = angular.module('AngularDirectiveDemo');
app.directive('scSchedule', function () {
var Appraisals = [
{ id: 2432, name: "Greatness" },
{ id: 2486, name: "Mediocrity" }
return {
restrict: 'E',
replace: 'true',
template: '<div>'+
'<h1>Say Something Directive</h1><ul> <li ng-repeat="x in Appraisals">' +
'{{}}<a href="#" ng-click="viewAppraisalDetails(x)">Details</a></li></ul><div>blanko</div></div>',
controller: function ($scope) {
$scope.viewAppraisalDetails = function (appraisalToView) {

console.log('viewing details for ' + appraisalToView.Id);



{id: 2432, name:"Greatness"},
{id:2486, name:"Mediocrity"}


The html file:

<!DOCTYPE html>

<html lang="en" xmlns="" ng-app="AngularDirectiveDemo">
<meta charset="utf-8" />
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<script src="../Scripts/angular.js"></script>
<!-- <script type="text/javascript" src="../Scripts/App.js"></script> -->
<script src="../Codes/SampleDirective.js"></script>

<title>Angular Directive Demo</title>
<div ng-controller="scheduleCtrl">
<h1>Hello world</h1>
<li ng-repeat="x in Appraisals">{{}} {{}}</li>


The result:

enter image description here

Answer Source

You created local variable Appraisals so the view doesn't see it. It needs to be in a scope:

return {
    restrict: 'E',
    replace: 'true',
    scope: {
       Appraisals: '='
    link: function(scope, element, attrs, tabsCtrl) {
      scope.Appraisals = Appraisals;
    template: '<div>'+
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download