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

0

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

app.directive('helloWorld', function($compile) {
    return {
        restrict: 'AE',
        replace: true,

        scope:{
            arrayItem: '=ngModel'
        },
        link: function ($scope, ele, attrs) {
            $scope.$watch( 'ngModel' , function(){
                ele.html('<div ng-click="sendLike({{arrayItem.data.timeline_content}})" class="timeline-item"> Hello {{arrayItem2.data.timeline_content}} </div>');
                $compile(ele.contents())($scope);
            });
        }
    };
});

И это HTML-представление:

<hello-world ng-repeat="arrayItem in arr" ng-model="arrayItem"></hello-world>

Но ng-click внутри динамически генерируемого HTML не работает. фактически перекомпиляция этого нового добавленного раздела не работает.

ОБНОВИТЬ:

это то, чего я хочу достичь: Изображение 174551

на самом деле я хочу создать чат-приложение. сообщения, хранящиеся внутри массива, и я должен привязать этот массив к виду HTML. если я нажимаю на каждое сообщение, мне нужно вызвать предупреждение(), запущенное внутри контроллера. мой контроллер выглядит так:

app.controller("timelineCtrl", function ($scope) {
    $scope.arr={};

    $scope.sendLike = function (id) {
        alert(id);
    };
         .
         .
         .
}

в способе jQuery я просто использую методы манипуляции с DOM и добавляю новые теги для каждого сообщения, но по Угловому пути мне нужно связать этот массив как ng-модель или что-то в этом роде.

на первый взгляд, я понимаю, что разработка директивы должна быть хорошей идеей, а внутри модуля я могу получить доступ к основной области и делать что-то нужное с этой директивой, и я ожидаю, что изменения внутри этой директивы будут проецироваться в представление HTML, но это терпит неудачу, и такие вещи, как ng-click не работает для динамически создаваемых тегов.

  • 3
    это третий вопрос, который вы опубликовали за 24 часа и спрашивает, как сделать то же самое. Использование ele.html не будет работать лучше, чем первый пример, который вы опубликовали вчера с помощью JQuery. После 6 вопросов все еще неясно, что вы на самом деле пытаетесь достичь здесь; Вы продолжаете задавать вопросы XY без объяснения всей картины.
  • 0
    в области, которую вы компилируете, отсутствует sendLike потому что это изолированная директива
Показать ещё 9 комментариев
Теги:

1 ответ

2
Лучший ответ

Это можно сделать двумя способами: с директивой или без нее.

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

<div ng-controller="timelineCtrl" class="timelineframe">
  <div ng-repeat="post in timeline | orderBy:'-lineNumber'" class="post">
    <div ng-click="sendAlert(post)">
      <span class="postnumber">{{::post.lineNumber}}:</span>
      <span class="message">{{::post.message}}</span>
    </div>
  </div>
</div>

всякий раз, когда объект добавляется к $ scope.timeline, ему может быть присвоен номер lineNumber, и мы можем использовать угловой OrderBy для сортировки направления в обратном порядке. lineNumber порядка (с использованием -). $scope.sendAlert(post) отправит конкретную запись функции. в наших привязках мы используем :: чтобы указать, что это однократные привязки, т.е. не значения, которые необходимо контролировать независимо от массива. Это может улучшить производительность в больших списках.

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

app.directive('timelinePost', function() {
  return {
    restrict: 'AE',
    scope:{
       post: '='
    },
    template: '<div ng-click="postCtrl.sendAlert()">
                 <span class="postnumber">{{::postCtrl.post.lineNumber}}:</span>
                 <span class="message">{{::postCtrl.post.message}}</span>
               </div>',
    controller: 'postController',
    controllerAs: 'postCtrl',
    bindToController: true
};


app.controller("postController", function(){
  var self = this;  //save reference to this
  self.sendAlert = function(){
    //the specific post is available here as self.post, due to bindToController
  };
};

//usage in HTML:
<div ng-controller="timelineCtrl" class="timelineframe">
  <div ng-repeat="post in timeline | orderBy:'-lineNumber'" class="post">
    <timeline-post post='post'></timeline-post>
  </div>
</div>

вы могли бы еще раз обернуть эту временную шкалу в директиве аналогичным образом, если хотите. Любой из них выполнит одну и ту же задачу: перебирает ваши данные, заказывая их так, чтобы последняя запись была наверху и обновлялась всякий раз, когда изменяется массив. В методе non-directive timelineCtrl обрабатывает функцию $scope.sendAlert; в методе директивы он обрабатывается postController.

Обратите внимание, что это приблизительный проект, основанный на том, что вы описали, и информации из разных должностей за последние 2 дня. Я не создал набор данных для итерации, чтобы тщательно протестировать, но логика здесь должна помочь вам начать.

Поделиться
  • 0
    Большое спасибо за ваше время. Я проверил оба, и они работают. но, к сожалению, ng-click тоже не работает.
  • 0
    хм, это не имеет смысла; Вы можете опубликовать, как выглядит функция клика и как вы объявили ее в HTML? это должно работать из этого.
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню