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:
sc-Schedulebysc-schedule<div ng-controller="scheduleCtrl">, so Appraisals is not in its scope.