所以我有以下文件夹结构:
我已将以下内容添加到index.html中:
<script type="text/javascript" src="js/modules/App/lib/App.js"></script>
<script src="js/modules/Cafe/lib/Cafe.js"></script>
<script src="js/modules/Cafe/directives/cafe-list/cafe-list.js"></script>
我的指令如下所示:
angular.module('Cafe').directive("CafeList", function () {
return {
restrict: "E",
templateUrl: 'js/modules/Cafe/directives/cafe-list/cafe-list.html',
link: function (scope, element, attr) {
}
};
});
我的指令html(位于
js/modules/Cafe/directives/cafe-list/cafe-list.html
看起来像这样:
<div class="one-half-responsive">
<div class="service-column material-box">
<img src="images/pictures/3s.jpg">
<h3>Mobile and Tablet</h3>
<em>responsive and ready</em>
<p>
All your mobile devices are compatible with material, and it will look gorgeous on your whatever
handheld you use!
</p>
<div class="more">
<a class="more-link" href="#">READ MORE</a>
</div>
</div>
我的观点很简单,看起来像这样:
<div>
<cafe-list></cafe-list>
</div>
当我运行它时,我在控制台中没有收到任何错误,而我在html中得到的只是标签
<cafe-list> </cafe-list>
没有内部html谁能看到我做错了什么?
我的App模块:
/**
* Created by root on 6/3/16.
*/
angular.module('App',[
'ngRoute',
'Cafe'
]).
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'js/modules/Cafe/views/cafeList.html'
}).
when('/phones/:phoneId', {
template: '<phone-detail></phone-detail>'
}).
otherwise('/phones');
}
]);
并在我的html上:
<html ng-app="App">
位于('js / modules / Cafe / lib / Cafe.js')中的Cafe模块
angular.module('Cafe', []);
我什至可以看到指令文件已加载!
最佳答案
我怀疑您的指令中可能缺少额外的结束div标签。
您也可以尝试使用.directive("cafeList",
代替.directive("CafeList",
,但我怀疑这样做会有什么不同。