Ng-model的值未定義於指令元素

我創建了一個指令，允許用戶將值（性別：男性或女性）作爲註冊表單的一部分進行切換。切換到輸入元素的文本值在切換時會在視圖內更新，但在提交表單時，ng-model值未定義。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>

來源

2015-11-21 user1163073

那麼首先，使用ngModel當你不需要操作輸入的value屬性。你應該閱讀關於這個的文檔。

給你的問題。您正在訪問控制器的$scope的屬性gender。（我建議不要在指令中使用控制器$ scope，而是將所需的所有內容從視圖中傳遞給指令，並使用隔離的作用域）。

但是你想要的目標是user.gender。我改變你的代碼的某些部分slighthy

.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

來源

2015-11-21 23:48:10 lexith

Ng-model的值未定義於指令元素

回答

相關問題