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

Question

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

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

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

<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() 。

范围文件

因此，根据您的情况，可以在按下某个键时调用$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);
    });    
}

更新了小提琴。