Angularjs ng模型未更新内部模式

我分配给is controller的ng模型可以在model中看到。但是当我更新model中的数据时，$scope变量没有更新。 此外，下拉列表不起作用，其值已在控制器中定义。 我是否需要在指令中进行更改

    <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>

模态示例
开放模态
电子邮件地址
密码
提交

控制器代码

var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
    $scope.email="hello@abc.com";
    $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;
          });
        });
      }
    };
  });

var mymodal=angular.module（'mymodal'，[]）；
mymodal.controller（'MainCtrl'，函数（$scope）{
$scope.email=”hello@abc.com";
$scope.showmodel=false；
$scope.toggleModal=函数（）{
$scope.showmodel=！$scope.showmodel；
};
$scope.buttonClicked=函数（）{
警报（“hello1”）；
警报（$scope.email）；
警报（$scope.client）；
}
$scope.clientList=[“300”、“600”、“900”]
$scope.client=$scope.clientList[0]；
$scope.changeClient=function（）{
selectedValue=$scope.client；
警报（selectedValue）；
};
});
mymodal.directive（'modal'，function（）{
返回{
模板：“”
'' + 
'' + 
'' + 
“×；”
{{title}}}+
'' + 
'' + 
'' + 
'' + 
'',
限制：'E'，
是的，
替换：正确，
范围：正确，
链接：函数postLink（范围、元素、属性）{
scope.title=attrs.title；
范围$watch（属性可见，函数（值）{
如果（值==true）
$（元素）.modal（'show'）；
其他的
$（元素）.modal（'hide'）；
});
$（element）.on（'show.bs.modal'，function（）{
作用域$apply（函数（）{
scope.$parent[attrs.visible]=true；
});
});
$（element）.on（'hidden.bs.modal'，function（）{
作用域$apply（函数（）{
scope.$parent[attrs.visible]=false；
});
});
}
};
});

看看-

您应该使用：

$parent.email

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

$parent.email

---

正如huan feng所说，您可以使用“$parent”，因为该指令有自己的独立作用域。对于您的“选择”，最简单的解决方案是使用以下内容：

<select ng-model="$parent.client" ng-change="changeClient()" ng-options="item for item in clientList">

和HTML：

<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="clientInfo.client" ng-change="changeClient()" ng-options="item for item in clientList">
        <label for="email">Email address</label>
        <input type="text" ng-model="clientInfo.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>

模态示例
开放模态
电子邮件地址
密码
提交

Thanx man…处理电子邮件很好，但下拉列表仍然存在问题…知道如何处理吗？@RHUL你检查过小提琴了吗？下拉列表似乎效果不错。@huanfeng，我在几秒钟前更新了我的答案，也许你也会感兴趣：）

<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="clientInfo.client" ng-change="changeClient()" ng-options="item for item in clientList">
        <label for="email">Email address</label>
        <input type="text" ng-model="clientInfo.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>