如何将 ng-model 的引用作为函数的参数传递？

Question

这就是我想要做的。我正在构建一个功能，人们可以使用该功能将 'previously saved content' 添加到文本区域。为了避免他们输入长内容，他们只需单击文本区域下方的锚点 link，查看包含可用内容的模式框，然后单击内容以填充文本框。查看下面的屏幕截图以了解更多上下文。

我在为 textarea 的 ng-model 设置新内容时遇到问题。我想在跨不同文本区域的应用程序中使用此功能。 ng-model 将是动态的。有什么方法可以在调用模态框并设置内容时将ng-model作为参考传递

<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-model) 因不同的文本区域而异。在某些地方，它是一个简单的变量，在某处它是一个对象的属性，在某处它是对象数组中一个对象的属性。所以只是把它作为一个字符串传递并在函数内部解析并不简单。

非常感谢！

Answer 1

您可能想使用这个作为参考。使用类似于：

     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 传递给函数，同时通过模板调用它。

Answer 2

我建议你写指令，所以你有 html 比如：

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

在此指令中，您可以绑定单击、打开模式，然后在块中为给定的属性分配新值。

Answer 3

回答我自己的问题。这对我有用。感谢 Petr 的指点。

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) 并将其绑定到点击是否会有任何不同。如果我能做得更好，请发表评论。谢谢！

如何将 ng-model 的引用作为函数的参数传递？

How to pass ng-model's reference as a parameter of a function?

javascript

angularjs

angularjs-directive