AngularJS：观察由变量和函数组成的表达式答案

【问题标题】：AngularJS : watching an expression consisting of variable and functionAngularJS：观察由变量和函数组成的表达式
【发布时间】：2015-09-29 20:26:35
【问题描述】：

大家！提前致谢！

我有以下问题：我想观察一个输入字段的属性，它同时是我的指令的名称，以聚焦并选择值时 a) 输入字段所在的区域被激活或何时 b) 并且发生了来自服务器的错误。

这里是输入框的代码：

<input type="email"
    data-focus-and-select="areas.contactInformationEditEmail || hasServerErrorsEmail()" />

这里是控制器功能的代码：

$scope.hasServerErrorsEmail = function() {
    return !!($scope.notifications.errors.email.empty ||
            $scope.notifications.errors.email.invalid ||
            $scope.notifications.errors.email.illegal ||
            $scope.notifications.errors.email.blacklisted ||
            $scope.notifications.errors.email.conflict);
};

如果发生服务器错误，则会将这些通知错误之一设置为 true。
这里是指令的代码：

angular.module('myApp.directive').directive('focusAndSelect', function() {
    'use strict';
    return {
        scope: { focusAndSelect: '=' },
        link: function(scope, element) {
            scope.$watch('focusAndSelect', function(newValue) {
                if (newValue && !element.hasClass('ng-hide')) {
                    element[0].focus();
                    element[0].setSelectionRange(0, element[0].value.length);
                }
            });
        }
    };
});

共有三种情况：

1) 当我将表单更改为可编辑模式时，“焦点和选择”起作用，因此 areas.contactInformationEditEmail 设置为 true。 2) 当我收到服务器错误时，“焦点和选择”将不起作用。输入字段未聚焦和选择。 3) 但是当我从表达式areas.contactInformationEditEmail || hasServerErrorsEmail() 中删除areas.contactInformationEditEmail 时，“焦点和选择”适用于错误接收输入字段。

我不知道。一次观察和变量和函数调用可能有问题吗？

感谢您的帮助。

【问题讨论】：

标签： javascript angularjs angularjs-directive directive watch

【解决方案1】：

当您在指令的孤立作用域中使用“=”时，它会绑定到父作用域中的属性，无法绑定到已评估的表达式。

试试这个：

<input type="email"
    data-focus-and-select="{{areas.contactInformationEditEmail || hasServerErrorsEmail()}}" />

和你的指令：

angular.module('myApp.directive').directive('focusAndSelect', function() {
    'use strict';
    return {
        scope: { focusAndSelect: '=' },
        link: function(scope, element) {
            scope.$watch('focusAndSelect', function(newValue) {
                if (newValue && !element.hasClass('ng-hide') && scope.$eval(newValue)) {
                    element[0].focus();
                    element[0].setSelectionRange(0, element[0].value.length);
                }
            });
        }
    };
});

您需要 $eval，因为该值将是一个字符串，并且您想获取它的布尔值。

这里有一个简化的jsfiddle 来演示它。

【讨论】：