与 JQuery 事件的角度绑定不起作用

Question

我有一个链接列表，点击每个链接都会使用唯一的数字索引更新 selectedLinkIndex 值。如果链接的索引（请参阅下面 JS fiddle 中的 ng-click 绑定）等于 selectedLinkIndex 则链接的类将更新为使用 CSS 将其着色为红色。

我想扩展此功能，以便按左右箭头键递增/递减 selectedLinkIndex 并更新链接的类以将所选链接着色为红色（根据上述行为）。

但是，这似乎不起作用（请参阅我的JS fiddle）。为什么这不起作用，我该如何实现所需的行为？

<div ng-controller="MyCtrl">
    <ul>
        <li><a href="#" id="link1" ng-class="linkClass(0)" ng-click="updateLinkIndex(0)">Link1</a></li>
        <li><a href="#" id="link2" ng-class="linkClass(1)" ng-click="updateLinkIndex(1)">Link2</a></li>
        <li><a href="#" id="link3" ng-class="linkClass(2)" ng-click="updateLinkIndex(2)">Link3</a></li>
    </ul>
</div>

---

function MyCtrl($scope) {
    $scope.selectedLinkIndex = 0;
    $scope.linkClass = function(index) {
        return (index == $scope.selectedLinkIndex) ? "active" : "";
    }

    $scope.updateLinkIndex = function(value) {
        $scope.selectedLinkIndex = value;
    }

    $(document).keydown(function(e) {
        switch(e.which) {
            case 37:
                $scope.selectedLinkIndex--;
                break;
            case 39:
                $scope.selectedLinkIndex++;
                break;
            default:
                return;
        }
        alert("Selected Link index is now " + $scope.selectedLinkIndex);
    });    
}

Answer 1

你必须告诉你的观点你想要重估什么。

在 Angular 中，你可以找到 2 种方法：

• $digest
• $apply

$digest() 只会在您当前范围内触发观察者，而不是 $apply，后者会评估函数并运行 $rootScope.$digest()。

换句话说，当您调用$apply 时，您将评估$rootScope 和子作用域。

如果您调用$digest，您将评估当前范围的观察者，因此速度更快。

调用$apply() 将强制调用$digest()。

Scope documentation

因此，在您的情况下，您可以在按下某个键时调用 $digest()：

function MyCtrl($scope) {
    $scope.selectedLinkIndex = 0;
    $scope.linkClass = function(index) {
        return (index == $scope.selectedLinkIndex) ? "active" : "";
    }

    $scope.updateLinkIndex = function(value) {
        $scope.selectedLinkIndex = value;
    }

    $(document).keydown(function(e) {
       switch(e.which) {
            case 37:
                $scope.selectedLinkIndex--;
                break;
            case 39:
                $scope.selectedLinkIndex++;
                break;
            default:
                return;
        }
        //Call $digest cycle
        $scope.$digest();
    });    
}

Answer 2

如果您能够将您的angular.js 文件更新为最新的@1.4.3，我建议您像这样更新您的代码：

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', MyCtrl); // <---define the controller here.

function MyCtrl($scope, $timeout) { // use a $timeout svc to run the digest
    console.log($scope);            // cycle to update the values.
    $scope.selectedLinkIndex = 0;
    $scope.linkClass = function(index) {
        return (index == $scope.selectedLinkIndex) ? "active" : "";
    }

    $scope.updateLinkIndex = function(value) {
        $scope.selectedLinkIndex = value;
    }

    $(document).keydown(function(e) {
        $timeout(function(){ // wrap this code inside $timeout
          switch(e.which) {
            case 37:
                $scope.linkClass($scope.selectedLinkIndex--); // call the linkClass method and update the index
                break;
            case 39:
                $scope.linkClass($scope.selectedLinkIndex++);// call the linkClass method and update the index
                break;
            default:
                return;
          }
        },0);

        alert("Selected Link index is now " + $scope.selectedLinkIndex);
    });    
}

Updated fiddle.