动态地添加指令没有响应 [英] Dynamically added directives not responding

问题描述

我建立从服务器加载一些数据的应用程序，并根据这些数据包括：（追加）指令到DOM。结果
这里是主要的HTML页面：

I am building an app which loads some data from server and according to this data includes (appends) directives into the dom.
Here is the main page 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>

这里是毒鼠强测试指令：

here is the tets-test directive:

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>

有是在控制台中没有错误，但也有未显示警报，因为看到的是指令的控制器。

There is no errors in the console but there is also no alert shown, as seen is the directive controller.

我做了什么错了？

推荐答案

更改指令的名称 TESTTEST 。它应该在定义中驼峰。

Change directive name to testTest. It should be camelcase in definition.

角正常化元素的标签和属性的名称，以确定哪些元素匹配该指令。我们通常通过其区分大小写的驼峰标准化名称（例如ngModel）是指指令。然而，由于HTML不区分大小写，我们指的指令在DOM由小写形式，通常用一个DOM元素划线分隔的属性（例如NG-模型）。

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

这篇关于动态地添加指令没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！