Question

我正在尝试在Angular.js中定义一个指令和一个模块，如下所示（venue-map.js）：

(function(){

    var app = angular.module('venues', []);

    app.directive('venueInfo', function(){
        return{
            restrict: 'E',
            templateUrl: "venue-info.html"
        };
    });
})();

其中venue-info.html仅包含<p>元素：

<p>WHY OH WHY</p>

但是，当我尝试在我的HTML上调用它时：

<venueInfo></venueInfo>

屏幕上没有任何内容。我相信我正确导入angular.js和我的模块脚本。这是我完整的index.html：

<!DOCTYPE html>
<html ng-app="venues">
<head>
    <meta charset="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script type="text/javascript" src="venue-map.js"></script>
</head>
<body>
  <venueInfo></venueInfo>
</body>
</html>

Answer 1

使用以下代码：

app.directive('venueInfo', function(){
    return{
        restrict: 'E',
        templateUrl: "venue-info.html",
        transclude: true
    };
});

Answer 2

使用<venue-info>代替<venueInfo>。

在Angular中，您应该在js中使用camelcase，但在html中使用连字符。

角度指令调用

2 个答案: