grisha grisha - 3 months ago 16
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 () {
//alert($scope.Appraisals[0]);
var Appraisals = [
{ id: 2432, name: "Greatness" },
{ id: 2486, name: "Mediocrity" }
];
alert(Appraisals[0].id);
return {
restrict: 'E',
replace: 'true',
template: '<div>'+
'<h1>Say Something Directive</h1><ul> <li ng-repeat="x in Appraisals">' +
'{{x.id}}<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);

}
}

};
});

angular.module('AngularDirectiveDemo').controller('scheduleCtrl',function($scope){
$scope.Appraisals=[
{id: 2432, name:"Greatness"},
{id:2486, name:"Mediocrity"}
];
});

}());


The html file:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularDirectiveDemo">
<head>
<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>
</head>
<body>
<div ng-controller="scheduleCtrl">
<h1>Hello world</h1>
<ul>
<li ng-repeat="x in Appraisals">{{x.id}} {{x.name}}</li>
</ul>

</div>
<sc-Schedule></sc-Schedule>
</body>
</html>



The result:

enter image description here

Answer

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

alert(Appraisals[0].id);
return {
    restrict: 'E',
    replace: 'true',
    scope: {
       Appraisals: '='
    }
    link: function(scope, element, attrs, tabsCtrl) {
      scope.Appraisals = Appraisals;
    },
    template: '<div>'+
Comments