Question

这就是我想要做的。我正在构建一个功能，人们可以使用它向文本区域添加“以前保存的内容”。为了避免他们输入长内容，他们只需单击文本区域下方的锚点链接，查看包含可用内容的模式框，然后单击内容以填充文本框。查看下面的屏幕截图以获取更多上下文。

我在设置textarea的ng-model的新内容时遇到问题。我想在不同文本区域的整个应用程序中使用此功能。 ng模型将是动态的。调用模式框并设置内容时，是否可以通过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

我建议您编写指令，因此您具有类似html的代码：

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

在此指令中，您可以绑定click，打开模式，然后在block中将新值分配给给定属性。

Answer 2

您可能想使用 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时将ngModel传递给该函数。

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的引用作为函数的参数？

3 个答案: