Использование углового шаблона и ссылок

Question

Я немного угловатый ребенок, но я прохожу через этот урок, чтобы сделать несколько отличных навигационных кнопок.

http://onehungrymind.com/build-super-smooth-rollover-angularjs-greensock-timelinelite/

Однако, я пытаюсь выяснить, самый простой, самый эффективный способ сделать каждый круг имеет индивидуальную уникальную ссылку внутри верхних дел. Какие-либо предложения?

Answer 1

Вот что-то, что едва работает. Запустите снимок ниже.

Это не лучший код, когда-либо написанный, но, возможно, это послужит источником вдохновения. Я в основном катал свою гладкую кнопку. Это не супер красиво, и я мог бы использовать много работы, но у меня нет времени. То, как я добавил ссылки, заключалось в том, чтобы вставлять посторонние объекты во время события mouseover и mouseout.

Я уверен, что библиотеки tween max используют svg.

В любом случае, возможно, вы можете черпать вдохновение из этого. Если это пустая трата времени, дайте мне знать, и я удалю ее.

var app = angular.module("testApp", []); 
 

 
app.directive('smoothButton', function() { 
 
    var linker = function (scope, element, attrs) { 
 
     var colors = ["red", "green", "yellow", "blue"] 
 
     var circles = []; 
 
     var links = []; 
 
     var speed = 1; //ms 
 
     var size = 45; 
 
     var x = 150; 
 
     var y = 150; 
 

 
     for (var i = 3; i >= 0; i--) { 
 
      addCircle(element, x, y, size, i); 
 
     } 
 

 
     var grow = function (size, finalSize, idx) { 
 
      var interval = setInterval(function() { 
 
       var circle = circles[idx]; 
 

 
       if (size >= finalSize) { 
 
        clearInterval(interval); 
 
        addLink(element, 
 
        x - 20, 
 
        180 - (finalSize * 1.5)); 
 

 
       } 
 
       size += 1; 
 
       circle.setAttribute("r", size); 
 

 
      }, speed); 
 
     } 
 

 
     var shrink = function (size, finalSize, idx) { 
 
      var interval = setInterval(function() { 
 
       var circle = circles[idx]; 
 

 
       if (size <= finalSize) { 
 
        clearInterval(interval); 
 
        for (link in links) { 
 
         if (links[link].parentNode) links[link].parentNode.removeChild(links[link]); 
 
        } 
 

 
       } 
 
       size -= 1; 
 
       circle.setAttribute("r", size); 
 

 
      }, speed); 
 
     } 
 

 
      function getFinalSize(size, idx) { 
 
       var result = size; 
 
       return result + (result * (Math.log(Math.abs(idx - 3) + 1.2))); 
 
      } 
 

 
      function addCircle(element, x, y, size, i) { 
 
       var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
 
       circle.setAttribute("cx", x); 
 
       circle.setAttribute("cy", y); 
 
       circle.setAttribute("r", size); 
 
       circle.setAttribute("fill", colors[i]); 
 

 
       element.parent().append(circle); 
 

 
       if (i == 0) { 
 
        circle.addEventListener("mouseover", function() { 
 
         for (var j = 0; j < 3; j++) { 
 
          grow(size, getFinalSize(size, j), j); 
 
         } 
 
        }); 
 

 
       } 
 
       //last circle only 
 
       if (i == 3) { 
 
        circle.addEventListener("mouseout", function() { 
 
         for (var j = 0; j < 3; j++) { 
 
          shrink(getFinalSize(size, j), size, j); 
 
         } 
 
        }); 
 
       } 
 
       circles.push(circle); 
 
      } 
 

 

 
      function addLink(element, x, y) { 
 

 
       var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject"); 
 
       fo.setAttribute("width", "50"); 
 
       fo.setAttribute("height", "50"); 
 
       fo.setAttribute("x", x); 
 
       fo.setAttribute("y", y); 
 

 
       var body = document.createElementNS("http://www.w3.org/1999/xhtml", "body"); 
 
       body.innerHTML = "<a href='#' style='background:white;font-size:25px;'> test </a>"; 
 

 
       fo.appendChild(body); 
 
       element.parent().append(fo); 
 
       links.push(fo); 
 

 
      } 
 
    } 
 

 
    return { 
 
     link: linker, 
 
     restrict: 'E' 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="testApp"> 
 
    <svg width="100%" height="100%" viewBox="0 0 1000 300"> 
 
     <smooth-button></smooth-button> 
 
    </svg> 
 
</div>