Как передать ссылку на ng-модель в качестве параметра функции?

Question

Итак, вот что я пытаюсь сделать. Я создаю функцию, с помощью которой люди могут добавлять «ранее сохраненный контент» в текстовые области. Чтобы уберечь их от ввода длинного контента, они просто щелкают по якорной ссылке под текстовой областью, видят модальное поле с доступным контентом и щелкают по контенту, чтобы заполнить текстовое поле. Проверьте скриншоты ниже для большего контекста.

У меня возникла проблема с настройкой нового содержимого для ng-модели текстовой области. Я хочу использовать эту функциональность в приложении для разных текстовых областей. Модель ng будет динамичной. Есть ли способ, которым я могу передать ng-модель в качестве ссылки при вызове модального поля и установить содержимое.

<textarea ng-model="new_message.reply"></textarea>
<a ng-click="openSavedMessages()">
  Add a Saved Message
</a>

Код контроллера

$scope.openSavedMessages = function(){
  var modalInstance = $uibModal.open({
      templateUrl: 'template.html',
      size: 'lg',
      controller:  "SavedMessagesController",
      scope: $scope
  });

  modalInstance.result.then(function(data){
    // dont want to do below
    // $scope.new_message.reply = data;
  }, function(){})
}

Обратите внимание, что переменная области видимости (ng-модель) в моем случае отличается для разных текстовых областей. В каком-то месте это простая переменная, где-то это свойство объекта, где-то его свойство объекта в массиве объектов. Так что не просто передать его как строку и проанализировать внутри функции.

Большое спасибо!

Answer 1

Я предлагаю вам написать директиву, поэтому у вас есть html вроде:

<textarea ng-model="new_message.reply"></textarea>
<a add-save-message="new_message.reply">
  Add a Saved Message
</a>

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

Answer 2

Отвечая на мой собственный вопрос. Это то, что сработало для меня. Спасибо Петру за указатели.

angular.module('app').
directive('savedMessages', function ($uibModal) {

    return {
        restrict: 'E',
        template: '<div><a ng-click="openSavedMessages()">Add a Saved Message</a></div>',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel){
            scope.openSavedMessages = function(){
                var modalInstance = $uibModal.open({
                    templateUrl: 'tpl/modals/saved_messages.html',
                    size: 'lg',
                    controller:  "SavedMessagesController",
                    scope: scope
                });

                modalInstance.result.then(function(data){
                  console.log(data);
                  ngModel.$setViewValue(data);
              }, function(){})
            }
        }
    };
});

И используя следующую директиву

<saved-messages ng-model="new_message.reply"></saved-messages>

Не уверен, что если ограничить его атрибутом (A) и привязать его к щелчку, изменится. Пожалуйста, прокомментируйте, если бы я мог сделать это лучше. Спасибо!

Answer 3

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

     var newMessageAdd = function () {
        var self = this;
        self.openSavedMessages = function (ngModel) {
            var modalInstance = $uibModal.open({
                templateUrl: 'template.html',
                size: 'lg',
                controller: "SavedMessagesController",
                scope: $scope
            });
            modalInstance.result.then(function (data) {
                // dont want to do below
                // $scope.new_message.reply = data;
                self[ngModel] = data; //use this instead
            }, function () {
            })
        };
        self.getMessage = function () {
            if (!$scope.newMessage) {
                return self;
            }
            //put your logic here to get newMessage
            for (var key in $scope.newMessage) {
                self[key] = $scope.newMessage[key];
            }
            return self;
        };
    };

    $scope.newMessage = new newMessageAdd().getMessage();

Затем вы можете передать ngModel функции, вызывая ее через шаблон.