Question

我无法使用Angular.js在模式弹出窗口中显示文本字段值。我在下面提供我的代码。

view.html：

<modal title="Driver Information" visible="showModal">
   <div class="col-md-12">
            <div class="form-group">
                <label>Comment</label>
                <textarea class="form-control" id="comment" rows="3" ng-model="comment"></textarea>
            </div>
        </div>
<button class="btn btn-success" id="singlebutton" ng-click="save();">Save</button>
<div style="clear:both;"></div>
</modal>

我的控制器页面如下所示。

viewcontroller.js：

var dashboard=angular.module('easyride');
dashboard.controller('viewcontroller',function($scope){
    $scope.save=function(){
       console.log('comment',$scope.comment);
    }
})
dashboard.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog modal-lg">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                '<h4 class="modal-title">{{ title }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      restrict: 'E',
      transclude: true,
      replace:true,
      scope:true,
      link: function postLink(scope, element, attrs) {
        scope.title = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value == true)
            $(element).modal('show');
          else
            $(element).modal('hide');
        });

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = false;
          });
        });
      }
    };
  });

在控制台消息中，我获得了blank值，即使我在注释字段中输入了一些值，然后单击“保存”按钮。在这里，我需要让用户在点击“保存”按钮后输入注释值，一旦通过控制台消息打印出值，弹出窗口就会关闭。

Answer 1

你可以从ng-click本身传递它

<modal title="Driver Information" visible="showModal">
   <div class="col-md-12">
            <div class="form-group">
                <label>Comment</label>
                <textarea class="form-control" id="comment" rows="3" ng-model="comment"></textarea>
            </div>
        </div>
<button class="btn btn-success" id="singlebutton" ng-click="save(comment);">Save</button>
<div style="clear:both;"></div>
</modal>

然后在控制器

var dashboard=angular.module('easyride');
dashboard.controller('viewcontroller',function($scope){
    $scope.save=function(comment){
       console.log('comment',comment);
    }
})

Answer 2

正如我在评论中提到的那样 - 您通过继承父作用域来创建新作用域，因此控制器中的$scope.comment将与指令中的$scope.comment不同。您必须使用“模型中的点”才能使其正常工作。如果要在之后关闭模式 - 可以在指令中实现此方法，然后通过作为参数传递来调用它。这是一个工作示例，它说明了对代码的上述更改：

angular.module('easyride', [])
.controller('viewcontroller',function($scope){
    $scope.modelForModal = {
      showModal: true,
      comment: '',
      save: function (closeModal){
        console.log('comment',$scope.modelForModal.comment);
        if (angular.isFunction(closeModal)) { closeModal(); }
      }
    };
})
.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog modal-lg">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                '<h4 class="modal-title">{{ title }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      restrict: 'E',
      transclude: true,
      replace:true,
      scope:true,
      link: function postLink(scope, element, attrs) {
        scope.title = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value == true)
            $(element).modal('show');
          else
            $(element).modal('hide');
        });
        
        scope.$parent.closeModal = scope.closeModal = function() {
          $(element).modal('hide');
        };

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = false;
          });
        });
      }
    };
  });

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<body ng-app="easyride">

<div ng-controller="viewcontroller">

<modal title="Driver Information" visible="modelForModal.showModal">
   <div class="col-md-12">
            <div class="form-group">
                <label>Comment</label>
                <textarea class="form-control" id="comment" rows="3" ng-model="modelForModal.comment"></textarea>
            </div>
        </div>
<button class="btn btn-success" id="singlebutton" ng-click="modelForModal.save(closeModal);">Save</button>
<div style="clear:both;"></div>
</modal>
   
</div>

</body>


<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.slim.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

Answer 3

我在你的代码中进行了一些简单的更改，检查它并且它可以正常工作

visible="showModal"
ng-click="save(comment);"


$scope.save=function(comment){
        console.log('comment',comment);
        $scope.comment = comment;
        $scope.showModal = false;
    }

这里是jsfiddle https://jsfiddle.net/0m8mpx43/2/

无法使用Angular.js获取控制器中的模态弹出值

3 个答案: