Question

我是AngularJS的新手，我正在制作一些自定义Angular指令来完成我以前用Jquery做的事情，但有一种情况我不确定我是否正在这样做“角度方式“。它有效，但我认为可能有更好的方法。

我想要的是搜索框：

当焦点位于搜索框时，应用程序必须将框中文本的颜色从灰色更改为黑色。该应用程序还必须检查框中的当前文本，如果它是默认文本，则应用程序必须清除文本。

当框失去焦点（模糊）时，应用必须将框的文本更改为灰色。只有在失去焦点时文本框为空时，它才必须放回默认文本。

这是一个jsfiddle，它有一个指令设置来完美地完成所有这些。 http://jsfiddle.net/Rick_KLN/5N73M/2/

但我怀疑还有更好的方法。

似乎控制器中的所有三个变量都是不必要的。我似乎也有4 if，else语句太多，并且绑定到所有事件是矫枉过正，因为只使用焦点和模糊，并且它们在if语句中指定。

有关优化此指令的任何想法吗？

Answer 1

您可以创建一个需要ng-model指令的自定义指令，然后在指令的link函数中提供第四个参数，该参数是对模型的引用。这将允许您观察模型的变化并做出相应的反应。这是小提琴： http://jsfiddle.net/brettlaforge/6t39j/3/

var app = angular.module('app', []);

app.directive('searchbar', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, model) {

            var options = scope.$eval(attrs.searchbar);
            scope.$watch(attrs.ngModel, function(value) {
                // If the input element is currently focused.
                if (!elm.is(":focus")) {
                    // If the input is empty.
                    if (value === undefined || value === "") {
                        // Set the input to the default. This will not update the controller's model.
                        elm.val(options.default);
                    }
                }
            });

            elm.on('focus', function(event) {
                // If the input is equal to the default, replace it with an empty string.
                if (elm.val() === options.default) {
                    elm.val('');
                }
            });

            elm.on('focusout', function(event) {
                // If the input is empty, replace it with the default.
                if (elm.val() === '') {
                    elm.val(options.default);
                }
            });
        }
    };
});

function FormCtrl($scope) {
    $scope.search = "";
}

Answer 2

您要查找的“默认文本”行为由HTML5 placeholder属性自动处理。它在just about any modern browser中受支持，可以使用CSS设置样式，如下所示：

标记：

<input id="searchBar" type="text" placeholder="Search" />

CSS：

#searchBar                                  { color: #858585; }    
#searchBar:focus                            { color: #2c2c2c; }    
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder          { color: transparent; }
#searchBar:focus:-moz-placeholder           { color: transparent; }
#searchBar:focus:-ms-input-placeholder      { color: transparent; }

就这么简单。

备注：

伪元素＆amp;伪类（-webkit-input-placeholder等）是隐藏占位符文本的焦点。通常它会一直持续到你开始输入。

我分叉你原来的jsFiddle。它不再是一个AngularJS应用程序了： http://jsfiddle.net/Smudge/RR9me/

对于较旧的浏览器：您仍然可以使用与上面相同的代码，但如果不支持该属性，则可以使用Modernizr（或类似的东西）fall-back to a javascript-only approach。

优化AngularJS指令，更新焦点上的ng-model和ng-style

2 个答案:

标记：

CSS：