javascript - NG-model 值未从指令元素中定义

Question

我创建了一个指令，允许用户切换一个值(性别:男性或女性)作为注册表的一部分。分配给输入元素的文本值在切换时会在 View 中更新，但是，当我提交表单时，ng-model 值未定义。

我很确定这与通过指令生成的元素在 View 加载后注入(inject)到 DOM 中有关。在 jQuery 中，您只需在定义事件类型后定位元素，这就能解决问题，但是我不确定如何在 Angular 中解决问题。

.directive('gendertoggle', function() {
  return {
    restrict: 'E',
    template: '<input type="button" value="Male" ng-model="user.gender"></input>',
    link: function($scope, elem, attrs) {
      elem.bind("click", function() {
        if (elem[0].childNodes[0].value == "Male") {
          elem[0].childNodes[0].value = "Female";
          $scope.gender = 'Female';
          console.log($scope.gender);
        } else {
          elem[0].childNodes[0].value = "Male";
          $scope.gender = 'Male';
          console.log($scope.gender);
        }
      })
    }
  }
});

.controller('RegisterCtrl', function($scope, $ionicHistory, $state, $rootScope, $localstorage, AuthenticationService AUTH_PROVIDER) {
  $scope.RegisterUser = function(user){
    var email = user.email.toLowerCase();
    var firstname = user.firstname;
    var lastname = user.lastname;
    var password = user.password;
    var gender = user.gender;

    console.log(gender); //This is undefined

  }
})


<input type="text" name="firstname" ng-model="user.firstname">
<input type="text"name="lastname" ng-model="user.lastname">
<input type="email" name="email" ng-model="user.email" required>
<input name="password" type="password" ng-model="user.password">
<gendertoggle></gendertoggle>
<button nav-clear ng-click="RegisterUser(user)">
Register
</button>

Answer 1

首先，使用 ngModel 时，您不需要操作输入的 value 属性。您应该阅读有关此内容的文档。

针对你的问题。您正在访问 Controller 的 $scope 的属性 gender。 (我建议不要在指令内使用 Controller $scope，而是从 View 中将所需的所有内容传递给指令，并使用隔离的范围)。

但是您想要定位的是user.gender。我稍微更改了您代码的某些部分

.directive('gendertoggle', function() {
    return {
     restrict: 'E',
     scope: {
        user: "=",
     },
     template: '<button ng-click="onClick()">{{user.gender}}</button>',
     link: function(scope, elem, attrs) {
     scope.onClick = function(){
          scope.user.gender = scope.user.gender === "Male" ? "Female" : "Male";
     };
   }
 }
});

.controller('MainCtrl', function($scope) {
    $scope.viewModel = {
      user: {
        email: "",
        firstname: "",
        lastname: "",
        password: "",
        gender: "Male"
      },
      register: function(){
        console.log($scope.viewModel.user);
      }
   }
 });


<input type="text" ng-model="viewModel.user.firstname">
<input type="text" ng-model="viewModel.user.lastname">
<input type="email" ng-model="viewModel.user.email" required>
<input type="password" ng-model="viewModel.user.password">
<gendertoggle user="viewModel.user"></gendertoggle>
<button nav-clear ng-click="viewModel.register()">Register</button>

希望有帮助。

http://plnkr.co/edit/giZJn89jMGn9nfiCN96u?p=preview