Javascript AngularJS自定义指令问题

我是AngularJS的新手，在学习一门课程时遇到了一个问题（使用AngularJS的旧版本）。 刚刚创建了一个自定义指令，它似乎没有在视图端被调用。 以下是我的HTML代码：

<h3>Results Found:</h3>
<div class="list-group">
    <search-result></search-result>
</div>

找到的结果：

下面是JS代码：

myApp.directive('searchResult', function() {
    return {
        template: '<a href="#" class="list-group-item active"><h4 class="list-group-item-heading">Doe, John</h4><p class="list-group-item-text">555 Some St, New York, NY 101010</p></a>'
    }
});

myApp.directive（'searchResult'，function（）{
返回{
模板：“”
}
});

注意：我目前正在使用AngularJS的版本1.6.1。 有人能帮我吗？ （提前感谢大家）

演示

var myApp=angular.module（'DirectiveApp'，[]）；
myApp.controller（“mainController”、[“$scope”、“$http”，
函数（$scope，$http）{
}
]);
myApp.directive（'searchResult'，function（）{
返回{
模板：“”
}
});

列表
您的html中是否有ng应用程序？非常感谢您指出Nicolas的这一点。是的，我有一个ng应用程序，就在屏幕上。然而，由于某种原因，我重新启动了文本编辑器，现在它运行良好。。。不明白。但再次感谢你的帮助尼古拉斯感谢你的帮助萨吉塔兰。我重新启动了文本编辑器，不管出于什么原因，它都工作得很好。但我查看了您的代码，发现了一些我还不知道的东西，所以我们也会关注这些。非常感谢你的帮助！！