Javascript AngularJS自定义指令未显示

我在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>

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

编辑2:

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

angular.min.js:108 XMLHttpRequest无法加载file:///Users/damonmorris/Documents/ProgrammingProjects/lilysKitchen/LKCB/product-description.html. 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https

---

有人能在这里解释问题吗？

检查控制台。错误是什么？那是什么

ng show

！！您是从controller发送的吗？您的

product description.html

模板在哪里？我是说完整的网址！此错误是因为您无法访问html更改URL。是否使用

localhost

server？使用更新答案并告诉我结果

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;
    };
});