Javascript ng显示在指令更改相关范围值后不更新

我对ng show方法有一个问题，因为我将该方法设置为：

我检查用户名字符串的长度，但是即使它报告了正确的长度，ng show方法也不会为我隐藏/显示额外的文本，直到键笔划之后。我如何让它更新注册表项上用户名帮助器文本的可见性

如果你看着JS小提琴怎么样

我已经在同一个元素上用jQuery hide/show替换了它，但是我希望它只在角度上工作

欢呼

键控处理程序在Angular的“外部”运行，因此使用

作用域。$apply（）

使Angular注意到您更改了

showUsername

：

...
if(scope.account.username.length > 2) {
   scope.toggleShowUsername(true); 
   scope.usernameMessage = scope.account.usernameAvailable;
} else {
   scope.toggleShowUsername(false);
}
scope.$apply();

---

以上回答了您的问题，但我推荐@pkozlowski.opensource的答案/评论。

详细阐述pkozlowski的评论

我还认为你试图在一个地方做得太多了。该指令的（单一）责任是什么？根据名字它是“剥离字符”。。。但是，如果你看一下你在它里面做什么，你就是在剥离字符，调用方法，更新指令所在元素之外的元素的显示逻辑

我建议您简化指令，并将其他内容移至$watch：

以及有关守则：

在您的控制器中，我添加了以下内容

$scope.$watch（'account.username'，函数（值）{
如果（value.length>2）{
$scope.toggleShowUsername（true）；
$scope.usernameMessage=$scope.account.usernameAvailable；
}否则{
$scope.toggleShowUsername（false）；
}
});

那么你的指令是：

accountApp.directive（“stripCharacters”，['$filter'，function（$filter）{
返回{
限制：“C”，
要求：'ngModel'，
链接：功能（范围、元素、属性、模型）{
ngModel.$parsers.unshift（函数（值）{
var stripped=$filter（'stripCharacters'）（值）；
元素val（剥离）；
返回剥离；
});
}
}
}]);

要明确的是，马克·拉科克的答案在这里也会起作用，而且可能更适合你。。。但它缺少一个部分：$setViewValue。如果是这样，您只需将上述指令的链接函数更改为：

link: function (scope, element, attrs, ngModel) {
    element.bind('keyup', function () {
       var value = element.val();
       var stripped = $filter('stripCharacters')(value);
       element.val(stripped);
       ngModel.$setViewValue(stripped);
       scope.$apply();
    });
}

其中$setViewValue用于实际使用正确的值更新模型

---

我希望所有这些都有帮助。

IMO这是解决这个问题的正确方法：@pkozlowski.opensource是正确的，插入$parser将确保在摘要之前删除字符。那么您就不必担心作用域。$apply（）。

link: function (scope, element, attrs, ngModel) {
    element.bind('keyup', function () {
       var value = element.val();
       var stripped = $filter('stripCharacters')(value);
       element.val(stripped);
       ngModel.$setViewValue(stripped);
       scope.$apply();
    });
}