Dynamically added directives not responding

问题

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>

Here is the getBetTypeById(id) function from the scope:

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

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

And here is the 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.

What did I do wrong?

回答1:

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

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

来源：https://stackoverflow.com/questions/24360468/dynamically-added-directives-not-responding

标签

javascript

angularjs

angularjs-directive