將單擊事件綁定到在指令中創建的動態元素

我以爲我解決了這個問題，但是我錯了..... 我創建了一個指令，允許我清除文本輸入。基本上，當您開始在輸入字段中輸入時，文本框右側會顯示經典的「X」圖標。當你點擊它時，模型被刪除。這是我的指令。將單擊事件綁定到在指令中創建的動態元素

(function() { 
    "use strict"; 
    var app = angular.module("myApp"); 

    app.directive("clearInput", ['$compile', function ($compile) { 
     return { 
      require: 'ngModel', 
      scope: {}, 
      link: function (scope, element, attrs, ngModel) { 

       if (element.next().length) { 
        element.next().insertBefore(element); 
       } 

       var tpl = '<span> <i class="icon ion-close-circled placeholder-icon clear-element" ng-show="show" ></i></span>'; 
       var clear = angular.element(tpl); 

       scope.setValue = function (val) { 
        ngModel.$setViewValue(val); 
        ngModel.$render(); 
        scope.$apply(); 
       }; 

       clear.on('click', 
       function() { 
        scope.setValue(null); 
       }); 

       element.bind('blur', function() { scope.setValue(ngModel.$modelValue); }); 

       scope.$watch(function() { 
        return ngModel.$modelValue; 
       }, function (val) { 
        scope.show = val === null ? null : val.length > 0; 
       }); 

       $compile(clear)(scope); 

       element.after(clear); 
      } 
     } 
    }]); 
})();

現在，當我創建並測試指令，我做到了使用plunker，我包括了錯誤的很老的版本離子（1.0.0-beta.5）。在這種情況下，該指令就像一個魅力。

http://plnkr.co/edit/5rGzl1?p=info

當我移動的指令轉化爲我的申請，我發現我綁定Click事件不會fire.So我分叉的plunker和我用了一個更新的版本離子（1.0.1），和在這種情況下，點擊不起作用（但是dblclick確實.doh！）。

http://plnkr.co/edit/DH6jjG?p=info

有誰知道如何解決呢？謝謝！

來源

2015-08-08 MilitelloVinx

我開了離子GitHub上一票，這是答案

這是因爲我們使用標籤來設置集中的輸入。任何點擊/水龍頭/觸摸與標籤元素髮生將嘗試設置焦點到子輸入。

對於你所需要的，使用div而不是標籤將會正常工作。

所以，它看起來唯一要做的就是將我的元素包裝在一個DIV上（因爲我已經做了一個解決方法）。

這裏是票證的鏈接。

https://github.com/driftyco/ionic/issues/4205

來源

2015-08-12 14:08:54 MilitelloVinx

我打開你的第二個鏈接，我只是改變了這種

clear.on('click', 
       function() { 
        scope.setValue(null); 
       });

這個

element.on('click', 
       function() { 
        scope.setValue(null); 
       });

，它似乎工作。讓我知道，如果這就是你想達到:)

來源

2015-08-08 20:13:50

它可以在某種程度上由home.html文件與另一個（類似div標籤）更換label標籤，當然你失去的標籤功能（重點點擊標籤文字時的輸入）。

我試圖找到一個離子changelogs的原因，但沒有任何相關的（Ionic changelog）。也許值得在他們的Github項目上發佈一個新問題：Ionic issues。

來源

2015-08-08 20:23:12 Brunt

好的。我其實不明白爲什麼會發生這種情況。至少我現在有一個解決方法。 – MilitelloVinx

將單擊事件綁定到在指令中創建的動態元素

回答

相關問題