無法使用Angular.js在控制器中獲取模式彈出窗口值

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/