所以我有以下文件夹结构:
我已将以下内容添加到我的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">
咖啡厅模块位于(&#39; js / modules / Cafe / lib / Cafe.js&#39;)
angular.module('Cafe', []);
我甚至可以看到指令文件已加载!
答案 0 :(得分:3)
我怀疑你的指令中可能缺少一个额外的结束div标签。
您也可以尝试.directive("cafeList",
代替.directive("CafeList",
,但我怀疑这会有所作为。
答案 1 :(得分:1)
你指令的一个问题是你的指令名称,如果你想要命名两个单词指令,那么它应该在&#39; snake case&#39;这将转化为“骆驼案”&#39;。
// directive
angular.module('Cafe').directive('cafeList', function() {
return {
restrict: 'E',
template: 'js/modules/Cafe/views/cafeList.html'
}
});
// call directive
<cafe-list></cafe-list>