javascript - 动态添加的指令没有响应

Question

我正在构建一个应用程序，它从服务器加载一些数据，并根据此数据将指令包含(附加)到 dom 中。
这是主页 html:

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

这是作用域中的 getBetTypeById(id) 函数:

    $scope.getBetTypeById = function(id)
    {
        switch(id)
        {
            case 1:
                return '/views/partials/1.html';
                break;  
...

这是 1.html:

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

这是 tets-test 指令:

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

这是 bettaype_soccer_winner.html:

<h2>test</h2>

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

我做错了什么？

Answer 1

将指令名称更改为 testTest。定义上应该是驼峰拼写。

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

https://docs.angularjs.org/guide/directive