ng-model 未在 Modal 内更新

未在

关注

发信

关注(28)粉丝(399)

ng-model 未在 Modal 内更新

本文介绍了ng-model 未在 Modal 内更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我分配的 ng-model 可以在模态内看到控制器.但是当我更新模态内的数据时，$scope 变量没有更新.下拉菜单也不起作用，我在控制器中定义了其值.我需要更改指令吗.

 
<h1>模态示例</h1><button ng-click="toggleModal()" class="btn btn-default">打开模态</button><modal title="登录表单"visible="showModal"><div><select ng-model="client" ng-change="changeClient()" ng-options="clientList 中的项目"><label for="email">电子邮件地址</label><input type="text" ng-model="email" id="email" placeholder="输入电子邮件"/>
<div class="form-group"><label for="password">密码</label><input type="password" id="password" placeholder="密码"/>

<button type="submit" ng-click="buttonClicked()" class="btn btn-default">提交</button></modal>

控制器代码

var mymodal = angular.module('mymodal', []);mymodal.controller('MainCtrl', function ($scope) {$scope.email="[email protected]";$scope.showModal = false;$scope.toggleModal = function(){$scope.showModal = !$scope.showModal;};$scope.buttonClicked=function(){警报(你好1")；警报($scope.email)；警报($scope.client)；}$scope.clientList=["300","600","900"]$scope.client=$scope.clientList[0];$scope.changeClient = function() {selectedValue=$scope.client;警报(选定值)；};});mymodal.directive('modal', function () {返回 {模板:'<div class="modalfade">'+'<div class="modal-dialog">'+''+''+'<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>',限制:'E'，转置:真实，替换:真，范围:真，链接:函数 postLink(范围，元素，属性){scope.title = attrs.title;scope.$watch(attrs.visible, function(value){如果(值 == 真)$(element).modal('show');别的$(元素).modal('隐藏');});$(element).on('shown.bs.modal', function(){范围.$应用(函数(){scope.$parent[attrs.visible] = true;});});$(element).on('hidden.bs.modal', function(){范围.$应用(函数(){scope.$parent[attrs.visible] = false;});});}};});

看一看-JsFiddle 链接

解决方案

你应该使用:

$parent.email<input type="text" ng-model="$parent.email" id="email" placeholder="输入邮箱"/>

小提琴

ng-model which i am assigning is controller can be seen inside modal.But when i am updating the data inside the modal,the $scope variable is not updating.Also dropdown is not working whose value i have defined in my controller.Do i need to make changes in directive.

    <div ng-controller="MainCtrl" class="container">
  <h1>Modal example</h1>
  <button ng-click="toggleModal()" class="btn btn-default">Open modal</button>

  <modal title="Login form" visible="showModal">

      <div>
          <select ng-model="client" ng-change="changeClient()" ng-options="item in clientList">
        <label for="email">Email address</label>
        <input type="text" ng-model="email" id="email" placeholder="Enter email" />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password"  id="password" placeholder="Password" />
      </div>
      <button type="submit" ng-click="buttonClicked()" class="btn btn-default">Submit</button>

  </modal>
</div>

CONTROLLER CODE

var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
    $scope.email="[email protected]";
    $scope.showModal = false;
    $scope.toggleModal = function(){
        $scope.showModal = !$scope.showModal;
    };
    $scope.buttonClicked=function(){
    alert("hello1");
    alert($scope.email);
    alert($scope.client);
    }

    $scope.clientList=["300","600","900"]
    $scope.client=$scope.clientList[0];
    $scope.changeClient = function() {
            selectedValue=$scope.client;
           alert(selectedValue);
         };
  });

mymodal.directive('modal', function () {
    return {
      template: '<div class="modal fade">' +
          '<div class="modal-dialog">' +
            '<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;
          });
        });
      }
    };
  });

Have a Look-JsFiddle Link

解决方案

you should use:

$parent.email

<input type="text" ng-model="$parent.email" id="email" placeholder="Enter email" />

fiddle

这篇关于ng-model 未在 Modal 内更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-24 07:43