gpt4 book ai didi

angularjs - 范围更新后如何更新 angularjs 页面?

转载 作者:行者123 更新时间:2023-12-01 08:59:33 25 4
gpt4 key购买 nike

我编写了一个指令来捕获键盘事件,并在某些键上更新范围内的一些对象。这个想法是上下移动一个数组并显示所选行的详细信息。问题是页面没有更新,直到我执行另一个更新页面的操作。我该如何强制?

指令如下:

LogApp.directive("keyCapture", [function(){
var scopeInit;
return{
link: function(scope, element, attrs, controller){
scopeInit = scope
element.on('keydown', function(e){
scopeInit[attrs.keyCapture].apply(null, [e]);
});
}
}
}]);

这样绑定(bind)模板:

<body ng-controller="logCtrl" key-capture="movePreview">

Controller 方法:

$scope.movePreview = function(e){
if ($scope.events.length === 0)
return;
// Find the element
if (e.keyCode === 38 || e.keyCode === 40){
console.log("Pressed %s", e.keyCode);
var offset = 0;
if (e.keyCode === 38 && $scope.previewIndex > 0)
offset = -1;
else if (e.keyCode === 40 && $scope.previewIndex < $scope.events.length -1 )
offset = 1;

$scope.previewIndex += offset;
var eventId = $scope.events[$scope.previewIndex].uuid;
$scope.showEvent(eventId);
e.preventDefault();
}
};

$scope.showEvent(eventId) 将获取具有给定 ID 的项目并将其显示在页面的另一部分。在执行其他操作(例如单击按钮)之前不会更新的部分。是否可以强制更新页面?

这是一个重现的 fiddle :http://jsfiddle.net/gM2KF/1/如果单击该按钮,则计数器会更新。如果您按任意键,则不会显示任何内容。但是你再次点击按钮,你会看到计数器已经被键盘事件更新了,但是没有显示出来。

最佳答案

如果您正在收听非 Angular 事件:

element.on('keydown', function(e){
scopeInit[attrs.keyCapture].apply(null, [e]);
});

然后,要更新作用域,你需要调用 scope.$apply:

element.on('keydown', function(e){
scopeInit[attrs.keyCapture].apply(null, [e]);
scope.$apply();
});

这将启动一个 Angular $digest 循环并允许绑定(bind)更改。

关于angularjs - 范围更新后如何更新 angularjs 页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20571109/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com