Angular指令html未加载(控制台中没有错误)

时间:2016-06-04 19:06:38

标签: javascript html angularjs angularjs-directive

所以我有以下文件夹结构:

enter image description here

我已将以下内容添加到我的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', []);

我甚至可以看到指令文件已加载!

2 个答案:

答案 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>