Squeak.ru - шаблоны программирования

AngularJS — ng-click в функции ссылки директивы

Я работаю над директивой, и в функции link, перебирая модель массива, хочу добавить элементы на страницу с прикрепленными к ним обработчиками ng-click. Что-то вроде этого:

app.directive('foo', function(){
   restrict: 'A',
   link: function(scope, elem){
      ... // some logic

      for (var i = 1; i < numberOfPages + 1; i++) {
         elem.append('<li ng-click="bar('+i+')">'+i+'</li>');
      }
   }
});

Но обработчики ng-click мертвы по прибытии. Как я могу заставить обработчики вести себя так, как ожидалось?


  • См. документацию по компиляции. 17.04.2014
  • Хотя вы можете использовать $compile для решения своей проблемы, это не очень хорошая идея. Вместо этого попробуйте использовать шаблоны с привязками. 17.04.2014
  • В том-то и дело, что мне не нужны и не нужны привязки. Наблюдатели замедляют ход событий. 17.04.2014
  • Функция @Metzger link должна работать в первую очередь как контроллер и не должна напрямую изменять представление. Добавление прослушивателей событий — это нормально, но создание/удаление частей — нет. Вы неправильно использовали шаблон MVC. 17.04.2014
  • Хорошо, дайте мне решение, которое не включает двустороннюю привязку данных. Если их нет, я мало что могу сделать. 17.04.2014

Ответы:


1

В AngularJS вы не можете добавить директивы к своей пользовательской директиве без необходимости выполнять какую-то странную логику $compile, чтобы зарегистрировать директивы ngClick. Вероятно, что-то вроде:

// include $compile
// ... append li elements
scope.$apply(function() {
  $compile(elem)(scope);
});

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

angular.directive('pager', function() {
  return {
    restrict: 'AEC',
    scope: {
      numPages: '=pager',
      pageFn: '='
    },
    template: '<ul><li ng-repeat="page in pages" ng-click="executePage(page)">{{page}}</li></ul>',
    link:  function(scope, elem, attrs) {
      scope.pages = [];
      scope.$watch('numPages', function(pages) {
        if(!pages) return;
        scope.pages = [];
        for(var i = 1; i <= pages: i++) {
          scope.pages.push(i);
        }
      });
      scope.executePage = function(page) {
        if(scope.pageFn){
          // Additional Logic
          scope.pageFn(page);
        }
      };
    }
  };
})

Затем в вашем html вы должны написать такую ​​директиву:

<my-directive>
  <div pager="numberOfPages" page-fn="goToPage"></div>
</my-directive>

goToPage — это функция, определенная в директиве myDirective и принимающая параметр страницы. На данный момент директива пейджинга также достаточно абстрактна, чтобы вы могли использовать ее в нескольких местах, и вам не нужно беспокоиться о внешних функциях.

17.04.2014
  • Да, но приложение должно быть как можно более отзывчивым на таких старых устройствах, как оригинальный iPad, и использование ng-repeat приводит к тому, что страница зависает на указанном устройстве, даже с 20 элементами и примерно 8 наблюдателями за каждым. Насколько я знаю, я не могу отключить двустороннюю привязку данных к ng-repeat, поэтому мне остается взломать свой путь. Если есть что-то, что мне не хватает, я был бы признателен за совет. 17.04.2014
  • ха, боюсь, единственное предложение, которое я могу дать, — это быть открытым для использования других фреймворков, кроме Angular. Как правило, это довольно тяжело для стека JS. Если вам нужно обойти функциональность фреймворка по умолчанию один раз, вам придется делать это сотни раз. Как правило, это признак того, что что-то другое может лучше удовлетворить ваши потребности. 17.04.2014
  • Боюсь, на данном этапе развития пути назад нет, но я приму к сведению ваши и чужие советы и буду играть по правилам. Может быть, есть другой подход, который мне не хватает. Ваше здоровье. 17.04.2014

  • 2

    Это должно сделать это:

        app.directive('foo', function($compile){
       restrict: 'A',
       link: function(scope, elem){
          ... // some logic
    
          for (var i = 1; i < numberOfPages + 1; i++) {
             elem.append('<li ng-click="bar('+i+')">'+i+'</li>');
        $compile(elem)(scope);
          }
       }
    });
    
    17.04.2014

    3

    В итоге я заменил ng-repeat в шаблоне директивы на bindonce, что минимизирует занимаемую площадь.

    https://github.com/Pasvaz/bindonce

    17.04.2014
    Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...