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

Question

我有一个弹出显示项目与ng-重复，但在ng-重复的链接不起作用，两种方法。以下是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(“click”)附加ng-click="foo()“，但什么也没有。

如果我在ng-重复之外添加一个链接，如

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

它起作用了。

但是如果我用http://google.com替换所有的href，它就不起作用了。

谢谢

例琴

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>

Answer 1

这是因为每次移动鼠标时，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;
    }
};

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

Fiddle

Answer 2

我认为这是因为你的链接在你的按钮内。链接和按钮都是可点击的。因此，当你点击任何链接，它会理解你点击了一个按钮。尝试将您的弹出代码放在按钮外并检查。