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>

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

我做错了什么？

Answer 1

将指令名称更改为testTest。它的定义应该是camelcase。

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

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

动态添加的指令没有响应

1 个答案: