Угловой нг щелкните внутри динамически созданные Div-й не работает

Question

я добавляю некоторые дивы в моей HTML страницу в Angularcontroller:

jQuery("#mytag").after('<div ng-click="sayHi()">Hi</div>'); 

и sayHi метод является Angular Метода внутри controller:

$scope.sayHi = function() { 
     alert("hi"); 
}; 

Но ng-click внутри этих динамически созданных Div's не работает! Зачем?

Answer 1

Таким образом, вместо jQuery("#mytag").after('<div ng-click="sayHi()">Hi</div>');

Вы должны иметь:

function myTag() { 

    return { 
     link: function(element) { 
      element.after('<div ng-click="sayHi()">Hi</div>'); 
     } 
    } 
} 
angular.module('yourModule').directive('myTag', myTag); 

Тогда на ваш взгляд, вместо того, чтобы делать что-то вроде:

<div id="mytag"></div> 

Вы должны иметь:

<my-tag></my-tag> or <div my-tag></div> 

Обновление Как отмечает @Claies, это тоже не чистый подход к загрузке более или бесконечной прокрутки.

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

Предположим, мы знаем, что у вас есть только около 100 записей для отображения. Пользователь, вероятно, только хочет увидеть первые 20, но тогда у пользователя будет возможность увидеть еще 20 после этого и снова ... пока не отобразятся все 100 записей.

В этом случае, вероятно, будет нормально загружать все эти записи в браузер и фильтровать их на стороне клиента в Угловом. Опять же, это может быть не ваша ситуация. Я не знаю, что вы связываете.

Таким образом, на ваш взгляд, вы можете иметь фильтр, который ограничивает их для первых 20 записей. Затем выполните действие, которое увеличивает фильтр на 20 записей. Когда ограничение фильтра больше или равно количеству записей, скройте кнопку больше.

<div ng-repeat="record in vm.records | limitTo : vm.display"> 
    {{ record }} 
</div> 
<button ng-show="vm.enableLoadMore" ng-click="vm.showMore()">Load More</button> 

В контроллере для этой точки зрения, используя controllerAs синтаксис: только

function RecordsController() { 

    this.records = [ . . . ]; // your records 

    this.display = 20; // number of records to display 

    var self = this; 

    Object.defineProperty(this, 'enableLoadMore', { get: function() { 
     return self.records >= self.display; 
    }}) 
} 

RecordsController.prototype.showMore = function() { 
    this.display += 20; 
} 

Answer 2

угловой компилирует HTML, когда он инициализируется первый раз ,, если вы хотите перекомпилировать его можно вводить $ компилировать услуги в контроллер и использовать его как этот

$compile(element)(scope) 

, но это не правильный способ, чтобы динамически добавлять элементы в угловых Можете ли вы сказать мне, что именно вы пытаетесь построить?