AngularJS-链接和方法在嵌套ng重复中不起作用

AngularJS - link and methods not working in nested ng-repeat

本文关键字：不起作用 ng 嵌套 链接 方法 AngularJS-      更新时间：2023-09-26

我有一个弹出窗口，显示带有ng repeat的项目，但在ng repeat的内部，链接不起作用，方法也不起作用。这是html代码

<div class="skills-container">
  <i class="fa fa-tags"></i>
    <button type="button" class="btn btn-sm btn-primary skills" ng-repeat="skill in work.skills" ng-Mouseover="getSimilar($index)"><{- skill -}>
      <div class="bubble">
        <i ng-show="work.similar === null" class="fa fa-spinner"></i>
        <a ng-repeat="s in work.similar" ng-href="#work/<{-s.id-}>">
          <img ng-src="img/portfolio/<{-s.img-}>" title="<{-s.title-}>" />
        </a>
        <span ng-show="work.similar === false">No similar works found</span>
      </div>
    </button>
<div>

以及方法

$scope.getSimilar = function(index) {
    $scope.work.similar = null;
    WorkLoader.getSimilar($scope.work.skills[index], $route.current.params.workId).then(function(promise) {
        if(promise.msg) {
            alert(promise.msg);
            return;
        }
        $scope.work.similar = promise.data.length ? promise.data : false;
    });
};

点击图片，什么也不会发生。我还尝试用一个简单的console.log（"clicked"）附加一个ng-click="foo（）"，但什么都没有
如果我在ng重复之外添加一个链接，比如

<a href="http://google.com">Google</a>

它是有效的
但是如果我用替换所有hrefhttp://google.com，它不起作用。

感谢

示例jsfiddle
http://jsfiddle.net/9Aw3q/

------------------编辑------------------

请看一下代码，小提琴中的GoogleOK链接只是一个正在工作的例子。不起作用的链接是ng重复内的链接

<div class="bubble">
  <i ng-show="work.similar === null" class="fa fa-spinner"></i>
<!-- links not working -->      
      <a ng-repeat="s in work.similar" ng-href="#work/<{-s.id-}>">
    <img ng-src="img/portfolio/<{-s.img-}>" title="<{-s.title-}>" />
  </a>
      <!-- link working -->
      <a href="http://google.com">Google</a>
  <span ng-show="work.similar === false">No similar works found</span>
</div>

这是因为每次移动鼠标时mouseover都会启动循环。只是点击是不可能的。

当鼠标悬停在元素上时，需要保留一个标志（布尔值），当鼠标移出元素时，需要重置此标志。

类似这样的东西：

JS

$scope.initOver = false;
$scope.resetOver = function() {
    $scope.initOver = false;
}
$scope.getSimilar = function (index) {
    if($scope.initOver == false) {
        $scope.work.similar = [{
            id: '1',
            title: 'First'
        }, {
            id: '2',
            title: 'Second'
        }, {
            id: '3',
            title: 'Third'
        }];
        $scope.initOver = true;
    }
};

HTML

<button type="button" class="btn btn-sm btn-primary skills" ng-repeat="skill in work.skills" ng-Mouseover="getSimilar($index)" ng-Mouseleave="resetOver()">

Fiddle

我认为这是因为你的链接在你的按钮里。链接和按钮都是可点击的。因此，当你点击任何链接时，它都会理解你点击了一个按钮。试着把你的popover代码放在按钮外面，然后检查。

相关文章：