CODEWITHSUNDEEP
javascriptangularjs
mattc19
mattc19

Reputation: 718

Angular custom element directive is not displaying on screen

I am writing an angular app that pulls data from an api and displays the data in a custom directive. I am successfully getting data back from the api but it is not displaying in the format of the html template. Is there a problem with my syntax in the directive js file?

HTML

<!doctype html>
<html>
<head>
    <title>Angular Page</title>
    <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">    </script>
    <script src="js/controllers/MainController.js"></script>
    <script src="js/services/WaitTimes.js"></script>
    <script src="js/directives/rideInfo.js"></script>


<body ng-app="myApp" ng-controller="MainController">
    <div ng-repeat = 'ride in rides'>
        <p>{{ride.name + ": " + ride.waitTime }}</p>  <!--this works-->
        <ride-info info='ride'></ride-info> <!--this doesn't-->
    </div>
</body>
</html>

Directive JS

myApp.directive('rideInfo', function() {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        templateUrl: 'js/directives/rideInfo.html'
    };
});

Template URL

<div>
    <h2>{{ info.name }}</h2>
    <h3>{{ info.waitTime }}</h3>
</div>

Upvotes: 0

Views: 63

Answers (1)

mattc19
mattc19

Reputation: 718

I figured this out. It seems the code was ok but just wasn't working from my local machine.

Upvotes: 1

Related Questions