javascript - 如何在 AngularJS 中设置输入的值，而不影响其 ngModel

Question

JavaScript:

.directive('search', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$set('value', 'Word...');
            console.log(attrs);
        }
    };
}]);

并且添加了value属性，但没有显示。我认为这与 ngModel 属性不允许更改值有关，但我在 AngularJS 文档中的某个地方看到，可以通过编程方式设置值，所以有人可以告诉我怎么做吗？

HTML:

<input type="text"
ng-model="query"
ng-init="inputClass='input-inactive'"
ng-class="inputClass"
ng-focus="inputClass='input-active'"
ng-blur="inputClass='input-inactive'"
ng-change="searchModelChange()"
search />

编辑:最后，我想让它做一些简单的事情，比如在聚焦之前显示“搜索项目...”之类的内容，当聚焦时，将其设置为“”，然后模糊时，检查值是否为“”并将其设置回“搜索项目...”。

我知道这很简单，而且我已经在外部 JS 函数中使用过一次，但我觉得这不是涉及“getElementById”之类的内容的最佳解决方案，我认为使用 AngularJS from link 函数一定可以，只是我不知道如何...

编辑 2:与占位符不同。有办法解决这个问题吗？比如说，我是否需要实现与第一次编辑中描述的不同的目标？

Answer 1

类似这样的吗？

.directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defText = attrs.search;

        ngModel.$render = function(val) {
          var text = (!val && val !== 0) ? defText : val;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defText);
        });

      }
    };
  }
]);

angular.module('app', []).directive('search', [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var defText = attrs.search;

        ngModel.$render = function(val) {
          var text = (!val && val !== 0) ? defText : val;
          element.val(text);
        }

        element.on('focus', function() {
          if (!ngModel.$viewValue)
            element.val('');
        });

        element.on('blur', function() {
          if (!ngModel.$viewValue)
            element.val(defText);
        });

      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app">
  <input type="text" ng-model="query" search="Word..." />{{query}}
</div>