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

Question

我创建了一个指令，该指令允许用户在注册表格中切换值（性别：男性或女性）。 切换时，分配给输入元素的文本值将在视图中更新，但是，当我提交表单时， ng-model值未定义。

我很确定，这与以下事实有关：在加载视图之后，将通过指令生成的元素注入到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属性。 您应该在文档中阅读有关此内容。

给你的问题。 您正在访问控制器$scope的属性gender 。 （我建议不要在指令中使用控制器$ scope，而是从视图中将所需的所有内容传递给指令，并使用隔离的作用域）。

但是，您要定位的是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