$ обобщит не определена в угловой контроллер

Question

Im пытается клонировать Div тег, который содержит несколько HTML-элементов с функцией нг-клик,

Но динамически клонированный и прилагаемую HTML элементы не огневые функцию нг-клик,

Может кто-нибудь помочь мне

это код, который я использовал

angular.module('AddNewCab', []) 

    .controller('cabcontainer', ['$scope','$compile', function($scope,$compile) { 

    $scope.count = 0; 
    $scope.myFunc = function($compile) { 
     $scope.count=$scope.count+1; 
     var source = angular.element(document.querySelector('#cabdata')); 
     var container = angular.element(document.querySelector('#cabcontainer')); 
     var uniqueid='cabdata'+$scope.count; 
     var temp=$compile(source.clone().attr('id',uniqueid),$scope); 
     container.append(temp); 
    }; 
    }]); 

Answer 1

Я не так, как ваш HTML-файл, но я создал один из примеров этого.

Заглянуть: https://plnkr.co/edit/ZQ7EYw5CB3DojCKs7Qlv

HTML:

<div ng-controller="cabcontainer"> 
    <div id="cabdata"> 
    <p>Test1</p> 
    <p>Test2</p> 
    </div> 
    <div id="cabcontainer"> 
    <p>Clone here</p> 
    </div> 
    <input type="button" ng-click="myFunc()" value="Clone"/> 
</div> 

JS:

angular.module('AddNewCab', []) 

    .controller('cabcontainer', ['$scope','$compile', function($scope, $compile) { 

    $scope.count = 0; 
    $scope.myFunc = function() { 

     $scope.count=$scope.count+1; 
     var source = angular.element(document.querySelector('#cabdata')); 
     var container = angular.element(document.querySelector('#cabcontainer')); 

     var uniqueid='cabdata'+$scope.count; 
     var temp= $compile(source.clone().attr('id',uniqueid))($scope); 
     container.append(temp); 
    }; 
    }]); 

Примечание: Я сделал некоторые изменения в контроллере, например, нет необходимости ставить $ compile in you function, потому что он уже вводится на контроллер угловым.

Answer 2

Если я понимаю вас правильно, вы хотите добавить EventListener динамически созданный элементы? в этом случае я буду использовать jQuery вместо ng-click. Сокет, подобный

$("parentElement").on("click", "elementToClick", function() { 
    //your code here 
}); 

Вы можете сделать то же самое с угловой директивой, но jQuery было легче объяснить. И если вам нужны параметры, вы можете добавить их с данными-атрибутами элемента и вызывать их с

this.getAttribute("data-AttributeName") 

О, и если вы используете нг-атрибуты, сделать их данные-ng- * (например, данные -ng щелчок). Не принесет никаких шансов на функциональность, но сделает ваш код html действительным.