Angular自定义元素指令未显示在屏幕上

时间:2015-06-02 02:26:26

标签: javascript angularjs

我正在编写一个角度应用程序,它从api中提取数据并在自定义指令中显示数据。我成功地从api获取数据,但它没有以html模板的格式显示。我的语法在js文件中是否有问题?

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>

指令JS

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

模板网址

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

1 个答案:

答案 0 :(得分:0)

我想出来了。似乎代码还可以,但是我的本地机器还没有工作。