Добавления пользовательской директивы по нажатию кнопки в угловых JS

Question

var testModule = angular.module("testModule",[]); 
testModule.directive('addVehicle',function() { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function(scope, instanceElement, attributes) { 
      instanceElement.on('click',function() { 
       angular.element(document.getElementById('vehicles')).append('<vehicle-table></vehicle-table>'); 
      }); 
     } 
    } 
}); 
testModule.directive('vehicleTable',function() { 
    return { 
     restrict: 'E', 
     template: '<table class="vehicleTable">' + 
       '<tr><td class="vehicleData"><select></select></td></tr>' + 
       '<tr><td class="vehicleData"><input type="text"></td></tr> ' + 
       '<tr><td class="vehicleDataEnd"><input type="text"></td></tr>' + 
       '</table>' 
    } 
}); 

Выше мой угловой JS fragment.when я нажимаю addVehicle (это атрибут кнопочного элемента) Я получаю vehicleTable только в качестве тега, но не в качестве его шаблона будет вставлен в DOM. Что здесь может быть не так?

Answer 1

Поскольку директива должна быть скомпилирована и обработана должным образом, прежде чем они будут визуализированы с помощью шаблона и поведения здесь, вы просто добавляете элемент.

использование компиляции сервис $ компилировать

var el = $compile('<vehicle-table></vehicle-table>')(scope); 
angular.element(document.getElementById('vehicles').append(el); 

полный код директивы будет

testModule.directive('addVehicle',function() { 
    return { 
     restrict: 'A', 
     scope: false, 
     link: function(scope, instanceElement, attributes) { 
      instanceElement.on('click',function() { 
       var el = $compile('<vehicle-table></vehicle-table>')(scope); 
    angular.element(document.getElementById('vehicles').append(el); 

      }); 
     } 
    } 
}); 

Answer 2

В вашем примере, вы должны были бы $ скомпилировать добавленную директиву:

link: function(scope, instanceElement, attributes) { 
    instanceElement.on('click', function() { 
    var newElem = $compile(angular.element("<vehicle-table>"))(scope) 
    instanceElement.append(newElem); 
    }); 
} 

Но только потому, что вы пишете директиву, не означает, что вы должны отказаться от обычных угловых узоров. Вы могли бы просто сделать:

testModule.directive('addVehicle', function() { 
    return { 
    restrict: 'A', 
    scope: false, 
    template: "<vehicleTable ng-repeat='v in vehicles'></vehicleTable>", 
    link: function(scope, instanceElement, attributes) { 
     scope.vehicles = []; 
     instanceElement.on('click', function() { 
     scope.vehicles.push({}); // or whatever the object you need 
     }); 
    } 
    } 
});