Question

我想知道如何在AngularJS中正确重用控制器，模块和函数，以便为this Plunker中的每个帖子（现在的占位符只显示帖子的位置）制作略微不同的偏移量。

当以后ngRepeat将输出例如6个帖子时，我希望每个帖子都使用与mousePosition（）函数中相同的代码，但是对于每个元素，使用新变量计算x和y坐标以增加相应的差距。

我认为帖子之间的弧度偏移会起作用，但它非常窄，所以你可以忽略它。问题是关于如何使用不同的变量（例如计数器）将这些代码应用于每个重复的元素。

angular.module('mouseMovement', [])
  .controller('MouseMovementController', ['$scope', function MouseMovementController($scope) {

    numberOfPosts = 1
    radiansBetweenPosts = (90 / numberOfPosts) * Math.PI / 180

    $scope.mousePosition = function(event) {

      mouseXpercent = event.pageX / window.innerWidth * 2

      x = Math.cos(mouseXpercent * Math.PI + radiansBetweenPosts) * 50 + 50
      y = Math.sin(mouseXpercent * Math.PI + radiansBetweenPosts) * -50 + 50

      $scope.position = {
        left: x + '%',
        top: y + '%'
      }

    }
  }])

编辑：我刚才有一个想法，或许更好的想法是循环包含所有帖子的div中的子元素？

Answer 1

你是对的，循环是最好的方法。

Angular也不需要参与这个基本过程。

如果你愿意，我写了一个你可以自由使用或参考的小型发电机：

＆＃13;

// generate element function
function el(n, type) {
  let children = []
  while (n) {
    children.push(document.createElement(type || 'div'))
    n--
  }
  return children
}

function genNodes() {
    // for loop generates each child node

    for (let child of children) {
      let nInContainer = container.childElementCount

      // do whatever you need to do to each element
      // i.e. apply id, class, or style

      child.id = `child_${nInContainer}`
      child.style.background = `rgba(100,${100*nInContainer%255},100,1)`
      child.style.color = `rgba(${88*nInContainer%255},255,255,1)`
      child.style.fontSize = `2px`
      child.style.textAlign = `center`
      child.innerHTML = `hello I am child ${nInContainer}`

      //child.style.paddingLeft = `${(nInContainer/children.length)*window.innerWidth}px`
      child.onmouseenter = () => {
        child.style.fontSize = `${50+nInContainer}px`
        console.log(child.id)
      }

      child.onmouseleave = () => {
        child.style.height = ``
        child.style.fontSize = `2px`
      }
      container.appendChild(child)
    }
  }
  //
  //
  //

let container = el(1, 'div')[0]
let children = el(101, 'div')
container.style.overflow = `hidden`
  //////////
genNodes()
  //////////
document.body.appendChild(container)

//grab any element you want after adding to dom
container.children.child_100.style.fontSize = `150px`

＆＃13;

您可以在此处使用实时代码： http://codepen.io/blrzzzt/pen/ozGXKK

使用相同的函数在AngularJS

1 个答案: