时间戳

首页 > 解决方案 > 无法使用 Angular.js 从模式弹出窗口中获取输入数据

javascript - 无法使用 Angular.js 从模式弹出窗口中获取输入数据

问题描述

我正在使用我的表单所在的模式弹出窗口，我无法通过ng-model使用 Angular.js 获取表单数据。我在下面提供我的代码。

<modal title="Owner Information" visible="showModal">
  <form class="ng-pristine ng-valid" id="frmsignup" name="frmsignup"  autocomplete="off">
  <div class="input-group bmargindiv1 col-lg-4 col-md-4 col-sm-4 col-xs-12 plr-15">
        <span class="input-group-addon ndrftextwidth text-left">Status:</span>
            <select class="form-control" name="status"  id="status" ng-model="status" required="required">
            <option value="">Select Status</option>
            <option value="1">Active</option>
            <option value="0">Inactive</option>
            </select>
  </div>
<div class="input-group bmargindiv1 col-lg-4 col-md-4 col-sm-4 col-xs-12 plr-15">
        <span class="input-group-addon ndrftextwidth text-left">Comment:</span>
            <textarea rows="5" cols="50" class="form-control" id="comment" name="comment" ng-model="comment" required="required">
            </textarea>
    </div>
  <input type="button" class="btn btn-success" ng-click="updateOwnerData();" id="addProfileData" value="Save" />
</form>
</modal>

我的模态弹出如下。

var dept=angular.module('cab');
dept.controller('ownerviewController',function($scope,$http,$timeout,$state,Upload,$window,DataService){
   $scope.updateOwnerData=function(){
          console.log('data',$scope.status,$scope.comment);
   }
})
dept.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;
          });
        });
      }
    };
  });

以上是我的脚本部分。我的问题是我无法$scope从弹出窗口中获得价值。我需要通过 Angular.js 收集值Scope。

标签： javascriptangularjs

解决方案

范围

在模态弹出指令两者中transcluded: true并scope: true创建自己的隔离范围。您想要获取更新输入的范围是另一个：您的控制器的范围。

请参阅Transcluded Directive 中的 Access Parent Scope 中的视觉说明。

沟通

为了从指令/transcluded-form 内部与父范围进行通信，您可以使用以下内容：

  • 为您的指令添加自己的范围 scope: { status: '=', comment: '=' }并使用双向绑定'='来传递父级的范围变量，例如<modal title="Owner Information" visible="showModal" data-status="status", data-comment="comment">
  • 创建并注入工厂或服务来处理指令（表单）和控制器之间的通信（即数据更新）

请参阅AngularJS：指令嵌入范围丢失

具有（继承的）范围的解决方案

见小提琴。它只是通过原型继承使用父范围（来自控制器）。因此可以使用模型（状态，评论）以及可以在嵌入形式中调用更新的函数。

推荐阅读