Javascript 动态添加的指令没有响应

我正在构建一个应用程序，从服务器加载一些数据，并根据这些数据将指令包括（附加）到dom中。
以下是html的主页：

<div ng-repeat="type in bet.bet_types">
    <div ng-include src="getBetTypeById(type.id)"></div>
</div>

以下是1.html：

<test-test bettype={{type}}></test-test>

下面是bettaype\u soccer\u winner.html：

<h2>test</h2>

测试

控制台中没有错误，但也没有显示警报，如指令控制器所示

---

我做错了什么？

将指令名称更改为

testTest

。这在定义上应该是正确的

Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的规范化名称（例如ngModel）引用指令。但是，由于HTML不区分大小写，我们在DOM中以小写形式引用指令，通常在DOM元素（例如ng模型）上使用破折号分隔的属性

---

您忘记添加

1.html

源代码。请加上

var app = angular.module('soccerWinner', []);

app.directive('test-test', function()
{
    return {
        restrict: 'E',
        replace: true,
        scope:
        {
            bettype: '='
        },
        templateUrl: '/views/partials/directives/bettaype_soccer_winner.html',
        controller: function()
        {
            alert('dfd');
        }
    };
});

<h2>test</h2>