javascript - Dynamically added directives not responding -

javascript - Dynamically added directives not responding -

i building app loads info server , according info includes (appends) directives dom. here main page html:

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

here getbettypebyid(id) function scope:

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

here 1.html:

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

here tets-test directive:

var app = angular.module('soccerwinner', []); app.directive('test-test', function() { homecoming { restrict: 'e', replace: true, scope: { bettype: '=' }, templateurl: '/views/partials/directives/bettaype_soccer_winner.html', controller: function() { alert('dfd'); } }; });

and here bettaype_soccer_winner.html:

<h2>test</h2>

there no errors in console there no alert shown, seen directive controller.

what did wrong?

change directive name testtest. should camelcase in definition.

angular normalizes element's tag , attribute name determine elements match directives. typically refer directives case-sensitive camelcase normalized name (e.g. ngmodel). however, since html case-insensitive, refer directives in dom lower-case forms, typically using dash-delimited attributes on dom elements (e.g. ng-model).

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

javascript angularjs angularjs-directive