Директивное общение - делиться ссылкой на внутренний элемент HTML

0

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

<text-holder ng-model='model.text' />
<text-inserter>
    <a ng-click='insert("hello")'>Hello</a>
</text-inserter>

text-holder превращается в нечто вроде этого:

<div class='my-class'>
    <h3>Enter some text:</h3>
    <textarea ng-model='ngModel'></textarea>
</div>

Вставка text-inserter должна вставлять материал в это textarea - какой самый чистый угловой способ разрешить эту связь? Я хочу иметь возможность поддерживать несколько экземпляров на странице. Должен ли я просто создавать уникальный идентификатор для каждого из общего сервиса? Это кажется немного нечистым.

Теги:
angularjs-directive

2 ответа

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

Ты можешь:

  • Wrappe ваша директива во внешнем элементе DOM.
  • создайте директиву связи для этого элемента.
  • Используйте контроллер этой директивы в качестве API для связи между двумя директивами.

  • Используйте запрос из двух директив, чтобы, установить, текст.

    <div text-com-directive>
<text-holder ng-model='model.text' />
<text-inserter>
    <a ng-click='insert("hello")'>Hello</a>
</text-inserter>
</div>

Директива:

    directive('textComDirective', function(){
    return {
       scope:{},
       controller: function($scope){
           // create functions that will be used to set/use the text inserter.
       }   
    }
    });
Поделиться
  • 0
    Оборачивать их, кажется, не очень удобно для повторного использования, потому что я должен помнить, чтобы оборачивать их везде, где я их использую, я бы предпочел более близкое решение, то, что я могу определить на самих элементах. Итак, я понимаю, как использовать общий сервис, но как мне поддерживать несколько на одной странице? Как бы я сказал, что этот text-holder разговаривает с этим text-inserter ?
0

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

HTML

<text-holder ng-model='model.text'></text-holder>
    <text-inserter>
      <a ng-click='model.insert("hello")'>Hello</a>
    </text-inserter>

script.js

var app = angular.module('testapp',[]);
app.controller('appController', function ($scope) {

  $scope.model = {text: 'sample', insert: function(a){$scope.model.text = a}};

})

app.directive('textInserter', function () {
      return {
      restrict: 'E',
      trasclude: true // important to keep the content that is defined outside of directive
    }
});

Образец

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

Поделиться
  • 0
    верно, но я не хотел просто обновлять модель, я хотел вставить текстовую область в определенном месте (вставить в каретку), модель не имеет ссылки на эту текстовую область. Как я могу получить хорошую ссылку на это?
  • 0
    @ Madd0g Я не понимаю твою точку зрения по поводу «вставь в каретку». Я хочу обновить модель, а также обновить текстовую область. Не могли бы вы рассказать мне образец, чтобы уточнить, что вы собираетесь делать с текстовой областью, когда получите «хороший отзыв»?

Ещё вопросы

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