AngularJS自定义指令未显示

Question

我在app.js文件中创建了一个自定义指令：

app.directive('productDescription', function(){
    return {
        restrict: 'E',
        templateUrl: 'product-description.html'
    };
});

这是product-description.html文件的内容：

<div>
    <h4>Description</h4>
    <blockquote>{{product.description}}</blockquote>
</div>

以下是我在index.html文件中引用它的方式：

<product-description class="panel" ng-show="panel.isSelected(1)">
</product-description>

然而，网页上没有显示模板，任何人都可以通过上述代码发现任何错误吗？

修改

我已经拥有ng-show属性的控制器，在添加自定义指令之前，这工作正常：

app.controller('PanelController', function(){
    var panel = this;
    panel.tab = 1;

    panel.selectTab = function(setTab) {
        panel.tab = setTab;
    };
    panel.isSelected = function(checkTab){
        return panel.tab === checkTab;
    };
});

编辑2：

刚刚检查了控制台，错误显示：

  

angular.min.js：108 XMLHttpRequest无法加载文件：///Users/damonmorris/Documents/ProgrammingProjects/lilysKitchen/LKCB/product-description.html。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https。

有人能解释这个问题吗？