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

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，一個對象或一個偽造的值：

1. falsy ：不會為指令創建作用域。 該指令將使用其父級的范圍。
2. true ：將為指令的元素創建一個原型繼承自其父對象的新子作用域。 如果同一元素上的多個指令要求一個新范圍，則僅創建一個新范圍。 新范圍規則不適用於模板的根目錄，因為模板的根始終獲得新的范圍。
3. {...} （對象哈希）：為指令的元素創建了一個新的“隔離”范圍。 “隔離”作用域與常規作用域的不同之處在於，它不原型地繼承自其父作用域。 這在創建可重用的組件時非常有用，該組件不應意外讀取或修改父范圍中的數據。

默認情況下，不創建范圍。 指令中就是這種情況，這意味着您可以直接從自定義指令訪問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>');