[英]Ng-model value is undefined from directive element
我創建了一個指令,該指令允許用戶在注冊表格中切換值(性別:男性或女性)。 切換時,分配給輸入元素的文本值將在視圖中更新,但是,當我提交表單時, 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>
首先,當使用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>
希望能幫助到你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.