3

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

我想做的是这个搜索框：

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

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

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

但是我怀疑有更好的方法来做到这一点。

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

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

4

2 回答 2

1

您可以创建一个需要 ng-model 指令的自定义指令，然后在指令的链接函数中提供第四个参数，该参数是对模型的引用。这将允许您观察模型的变化并做出相应的反应。这是小提琴：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 = "";
}​
于 2012-10-10T17:05:20.707 回答
1

您正在寻找的“默认文本”行为由 HTML5placeholder属性自动处理。几乎所有现代浏览器都支持它，并且可以使用 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; }

就是这么简单。

笔记：

  • 伪元素和伪类 (-webkit-input-placeholder等) 将占位符文本隐藏在焦点上。通常它会一直保留到您开始输入。
  • 我分叉了你原来的 jsFiddle。它不再是真正的 AngularJS 应用程序了：http: //jsfiddle.net/Smudge/RR9me/
  • 对于较旧的浏览器：您仍然可以使用与上述相同的代码，但如果不支持该属性，您可以使用 Modernizr（或类似的东西）回退到仅使用 javascript 的方法。
于 2013-02-28T07:21:22.550 回答