如何克隆ui-sref

我正在尋找一個指令，允許點擊外部元素來克隆其中一個元素的ui-sref，這樣點擊外部元素的行爲與點擊.cloned元素的行爲相同如何克隆ui-sref

<div clone-click=".cloned"> 
    ... 
    <a class="cloned" ui-sref="root.a" ng-if="true">example</a> 
    <a class="cloned" ui-sref="root.b" ng-if="false">example</a> 
    ... 
    <a ui-sref="root.c">elsewhere</a> 
    ... 
</div>

我試圖觸發點擊

app.directive('cloneClick', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      selector: '@cloneClick' 
     }, 
     link: function(scope, element) { 
      element.click(function() { 
       element.find(scope.selector).not(':disabled').first().click(); 
      }) 
     } 
    }; 
})

但這會導致一個無限循環或東西，不工作的屬性指令。我怎樣才能使它工作？還是有更好的方法來實現這一目標？

來源

2016-09-26 ryanve

你沒有考慮到事件冒泡。就像現在一樣，任何點擊事件對孩子來說都會冒泡到父母身上，在這一點上你要告訴它再次點擊相同的元素...因此無限循環如果你想要的目標被點擊

我的建議是以防止事件在<a>上傳播。

如果<a>本身被點擊，讓瀏覽器處理重定向，如果點擊母公司的其他部分使用$location服務使用href值是ui-sref產生重定向。

喜歡的東西：

link: function(scope, element) { 
    var $link = element.find(scope.selector).not(':disabled').first(); 
    // prevent bubbling on target link 
    $link.click(function(e) { 
    e.stopImmediatePropagation() 
    }); 

    element.click(function(e) { 
    // make sure target link wasn't element clicked 
    if (e.target !== $link[0]) { // assumes no child tags in `<a>` 
     $location.url($link.attr('href')); 
    } 
    }); 
}

您可能需要調整取決於您是否正在使用html5mode

編輯了一下：它發生在我寫這之後，你可能能夠觸發在<a>代替使用$location，因爲事件傳播（鼓泡）點擊仍然防止

來源

2016-09-26 21:54:02 charlietfl

謝謝，是的，當然，我一開始並沒有想到冒泡。我想盡量避免停止傳播。請參閱http://stackoverflow.com/a/39736042/770127 – ryanve

<ANY clone-click=".is-clone-click:not(:disabled):not(.is-disabled)"> 
    <a class="is-clone-click" ui-sref="root.example">example</a> 
</ANY>

I got it working like this。一些禁用指針的元素可以通過製作其容器e.target進行點擊，因此我在這些容器上添加了.is-no-clone-click以忽略它們。

app.directive('cloneClick', function() { 
    var angular = require('angular'); 
    var ignore = '[href], [ui-sref], [ng-click], .is-no-clone-click, label, input, textarea, button, select, option, optgroup'; 

    return { 
     restrict: 'A', 
     scope: { 
      selector: '@cloneClick' 
     }, 
     link: function (scope, element) { 
      element.click(function(e) { 
       if (e.isTrigger) { 
        return; 
       } 

       var cloned = element.find(scope.selector).first(); 
       var target = angular.element(e.target); 

       if (cloned.length && !cloned.is(target) && !target.is(ignore)) { 
        cloned.click(); 
       } 
      }); 
     } 
    }; 
});

光標還可以通過鼠標懸停和CSS類，像

element.mouseover(function() { 
    element.toggleClass('is-pointer', !!element.has(scope.selector).length); 
});

加入，但因爲我能夠創造一個CSS link masking solution真正解決什麼，我最終沒有使用這個指令我試圖去做。

來源

2016-09-27 23:58:08 ryanve

如何克隆ui-sref

回答

相關問題