Question

我试图为一个小输入字段编写一个指令，该字段只接受文本并动态地将符号从searchglass更改为X（如果内部有文本）并在单击时删除此文本。因此，我将必要的HTML添加到输入中，但只是可以运行本机ng指令。我对角度和希望都很陌生，有人可以提供帮助。有一些类似的问题，但没有一个真的有帮助。

angular.module('myApp')
    .directive('searchBox', function ($compile) {
        return {
            restrict: 'A',
            scope: {
                ngModel: '='
            }
            link: function(scope, element, attrs) {
                var appendix = angular.element(
                    '<span class="input-group-addon" ng-click="ngModel = none">' +
                    '  <i ng-hide="ng-model" class="fa fa-search"></i>' +
                    '  <i ng-show="ng-model" class="fa fa-close"></i>' +
                    '</span>');
                var wrapper = angular.element(
                    '<div class="input-group input-group-sm search-box-custom"></div>'
                );
                element
                    .wrap(wrapper)
                    .after(appendix);

                element.removeAttr("search-box"); //prevent endless compile loop
                element.removeAttr("data-search-box"); //prevent endless compile loop*/
                $compile(appendix)(scope);

            }
        };
    });

ng-model在输入字段中定义

<input search-box
       type="text"
       ng-model-options="{debounce:1000}"
       ng-model="inputValue"
       placeholder="Hier Tippen..." />

编辑：指令应该有一个连接到父作用域的自己的作用域，但不应该相同，因为父值在其他情况下可能不同

Answer 1

请尝试以下代码，它应该正常工作。

var appendix = angular.element(
   '<span class="input-group-addon" ng-click="inputValue = null">' +
   '  <i ng-hide="inputValue" class="fa fa-search"></i>' +
   '  <i ng-show="inputValue" class="fa fa-close"></i>' +
   '</span>');

更重要的是，我创建了jsFiddle，请查看。

有用的信息：

scope属性可以是true，对象或falsy值：

falsy：不会为该指令创建范围。该指令将使用其父级的范围。
true：将为指令的元素创建一个原型继承自其父级的新子范围。如果同一元素上的多个指令请求新范围，则只创建一个新范围。新范围规则不适用于模板的根目录，因为模板的根始终会获得新范围。
{...}（对象哈希）：为指令元素创建一个新的“隔离”范围。 'isolate'范围与正常范围的不同之处在于它不是原型继承自其父范围。这在创建可重用组件时非常有用，这些组件不应意外地读取或修改父范围中的数据。

默认情况下，不会创建范围。您的指令就是这种情况，这意味着您可以直接从自定义指令访问inputValue。

修改1

查看jsFiddle了解详情。主要概念是将modelSetter和modelGetter与有用的函数结合使用：

let modelGetter = $parse(attrs['ngModel']);
let modelSetter = modelGetter.assign;

scope.reset = function () {
    modelSetter(scope, null);
};

scope.isEmpty = function () {
    return !modelGetter(scope);
};

var appendix = angular.element(
    '<span class="input-group-addon" ng-click="reset()">' +
    '  <i ng-show="isEmpty()" class="fa fa-search">Search</i>' +
    '  <i ng-hide="isEmpty()" class="fa fa-close">Delete</i>' +
    '</span>');

angular指令：使用ng函数添加DOM元素

1 个答案: