Question

我创建了一个指令，允许用户切换一个值（性别：男性或女性）作为注册表单的一部分。分配给input元素的文本值在切换时在视图中更新，但是，当我提交表单时，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

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

解决你的问题。您正在访问控制器gender的媒体资源$scope。（我建议不要在指令中使用controllers $ 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

从指令元素中未定义Ng模型值

1 个答案: