在指令中访问范围变量
Accessing scope variable in directive
目前我有这个指令来检查用户输入的用户名是否已经存在于数据库中 -
app.directive('usernameAvailable', function ($timeout, $q, userService, authService) {
return {
restrict: 'AE',
require: 'ngModel',
link: function (scope, elm, attr, model) {
model.$asyncValidators.Username = function () {
var User = {
Username: model.$viewValue
}
var defer = $q.defer();
var promiseGet = userService.DoesUsernameExist(User);
promiseGet.then(function (result) {
scope.$emit('updateUsername', model.$viewValue);
if (result.data == true) {
model.$setValidity('Username', false);
} else {
model.$setValidity('Username', true);
}
},
function (errorResult) {
console.log('Unable to check if the username exists', errorResult);
});
return defer.promise;
};
}
}
});
这可行,但我的问题是,当您尝试编辑用户时,它会说该用户名已被占用,因为它已存在于数据库中。我想传递一个变量($scope.InitialUsername),这样我就可以在我的指令中设置一个条件,即在编辑用户时允许用户名等于此值。
这也意味着为编辑模式传递一个变量以允许检查此条件。
看看这个example
任何指令都有一个 scope
变量,您可以在其中将特定信息绑定到
.directive('myDirective', function() {
return {
restrict: 'AE',
scope: {
initialUserName: '=name'
},
};
})
在您的 html 中,您可以像这样访问此 属性:
<my-directive name="tom"></my-directive>
并且在模板端你可以像
这样查询名称
{{initialUserName.name}}
目前我有这个指令来检查用户输入的用户名是否已经存在于数据库中 -
app.directive('usernameAvailable', function ($timeout, $q, userService, authService) {
return {
restrict: 'AE',
require: 'ngModel',
link: function (scope, elm, attr, model) {
model.$asyncValidators.Username = function () {
var User = {
Username: model.$viewValue
}
var defer = $q.defer();
var promiseGet = userService.DoesUsernameExist(User);
promiseGet.then(function (result) {
scope.$emit('updateUsername', model.$viewValue);
if (result.data == true) {
model.$setValidity('Username', false);
} else {
model.$setValidity('Username', true);
}
},
function (errorResult) {
console.log('Unable to check if the username exists', errorResult);
});
return defer.promise;
};
}
}
});
这可行,但我的问题是,当您尝试编辑用户时,它会说该用户名已被占用,因为它已存在于数据库中。我想传递一个变量($scope.InitialUsername),这样我就可以在我的指令中设置一个条件,即在编辑用户时允许用户名等于此值。
这也意味着为编辑模式传递一个变量以允许检查此条件。
看看这个example
任何指令都有一个 scope
变量,您可以在其中将特定信息绑定到
.directive('myDirective', function() {
return {
restrict: 'AE',
scope: {
initialUserName: '=name'
},
};
})
在您的 html 中,您可以像这样访问此 属性:
<my-directive name="tom"></my-directive>
并且在模板端你可以像
这样查询名称{{initialUserName.name}}