Question

所以我有一个项目数组，都有一个名为exp login的函数，这个函数可以从onClick()执行

然而，发生的是，它不是执行所选元素的ng-repeat，而是从最后一个元素调用函数。为什么会这样，我该如何防止这种情况？

我的demo

Answer 1

问题是因为for循环中的闭包，在基本JavaScript中解决这个问题的方法就像SeongHyeon Park的答案中的IIFE一样，但这是Angular所以你应该使用原生的forEach循环然后是一个for循环。

这样循环的每次迭代都有自己的自包含范围，你不会有任何闭包问题。

因此，请将循环代码更改为：

angular.forEach(links, function(link) {
    link.onClick = function(){
    console.info('click')
    $state.go(link.destination)
  }
  $scope.links.push(link)
})

Full JsFiddle

Answer 2

// your code
for(var i = 0; i < links.length; i++){
    var link = links[i]
  link.onClick = function(){
    console.info('click')
    $state.go(link.destination)
  }
  $scope.links.push(link)
}

问题是hoisting。 for不会创建块范围。这意味着var的缩小将在范围上提升。简单地说，在for循环之外

var link;
var i;
for(i = 0; i < links.length; i++) {
    link = links[i];
    link.onClick = function() {
        $state.go(link.destination);
    };
    $scope.links.push(link);
}

你可以放松一下吗？当for循环结束时，link变量是links数组中的最后一个元素。

因此，当您点击a标记时，$ state始终会转到最后一个目的地。

好的，这是修复版。

link.onClick = (function (link) {
     $state.go(link.destination);
}((link);

只需更改onClick功能。

Answer 3

我修改了你的小提琴手，看一看，然后告诉我们是不是。 HTML：

<div ng-controller="Ctrl1">
  {{ destination }}
  <a ng-click="onClick(link)" ng-repeat="link in links track by $index">{{link.text}}</a>
  <div ui-view></div>
</div>

JS：

    var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "#",
        template: "<p>State 1</p>"
      }).state("state2", {
        url: "#",
        template: "<p>State 2</p>"
      });
});

var ctrls = angular.module("AppCtrls", []);

ctrls.controller( "Ctrl1", function($scope, $state) {
    $scope.links = [
        {
        text: 'state1',
        destination: 'state1'
      },
            {
        text: 'state2',
        destination: 'home'
      }
    ]
    $scope.destination = $state.current.name

    $scope.onClick = function(){
        console.info('click')
        $state.go(link.destination);
     };

});

http://jsfiddle.net/789Ks/288/

Answer 4

尝试类似的内容

var myApp = angular.module("myApp", ["ui.router", "AppCtrls"]);

myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state("state1", {
    url: "#",
    template: "<p>State 1</p>"
  }).state("state2", {
    url: "#",
    template: "<p>State 2</p>"
  });
});

var ctrls = angular.module("AppCtrls", []);

ctrls.controller("Ctrl1", function($scope, $state) {
  var links = [{
    text: 'state1',
    destination: 'state1'
  }, {
    text: 'state2',
    destination: 'state2' // changed from home to state2
  }]
  $scope.destination = $state.current.name
  $scope.links = []

  for (var i = 0; i < links.length; i++) {
    var link = links[i]
    $scope.links.push(link)
  }
// outside the for loop
  $scope.onClick = function(link) {
    console.info('click')
    $state.go(link.destination)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>

<div ng-app="myApp" ng-controller="Ctrl1">
  {{ destination }}
  <a ng-repeat="link in links" ng-click="onClick(link)">{{link.text}}</a>
  <div ui-view></div>
</div>

onClick会触发最后一项功能

4 个答案: