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

2024-02-01

我编写了一个捕获键盘事件的指令,并且在某些键上我更新了范围内的一些对象。这个想法是上下移动数组并显示所选行的详细信息。问题是,直到我执行另一个更新页面的操作后,页面才会更新。我怎样才能强迫这个?

这是指令:

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]);                
            });
        }
    }
}]);

像这样绑定模板:

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

控制器方法:

$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 的项目并将其显示在页面的另一部分。在执行另一个操作(例如单击按钮)之前不会更新的部分。是否可以强制页面更新?

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


如果您正在监听非角度事件:

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();               
});

这将启动一个有角度的$digest循环并允许更改绑定。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

范围更新后如何更新 angularjs 页面? 的相关文章

  • 如何在单元测试中的请求之间更改 $httpBackend when[method] 语句?

    在我的测试中 我启动一些模型数据并模拟响应 beforeEach function var re new RegExp http users online httpBackend whenGET re respond id 12345 us
  • 将复杂对象传递给 ui-sref 参数

    我需要这样的构建网址 列表 过滤器 状态 1 过滤器 类型 2 I do link a List a 在参数中传递复杂对象 如果传递简单对象 filter 1 可以 但我需要这个 state state list url list filt
  • 使 WebAPI 操作异步?

    我有一个问题 关于在 WebAPI MVC 控制器 AJAX 请求上使用 async await 是否有益 假设我有一个与 Web API 后端对话的 AngularJS 应用程序 并且我想获取一些数据 我对 Web API 进行了一些 A
  • 如何使用 Angular 创建 n 个可打印页面?

    嗯 我搜索了一下 没有找到类似的东西 我想知道如何使用 Angular 创建可打印内容 跳转到页面末尾并打印更多内容 如何强制内容始终适合特定尺寸 例如 PDF 我需要 Angular 来执行此操作吗 如果不是 HTML 我可以迭代 PDF
  • Angular - 过滤器从数组中删除空白字符串

    我有一个数组对象 数组可以包含空格 我如何创建 Angular 过滤器来删除空格以确定数组的长度 scope myData 1 1 4 4 N 4 6 8 2 2 4 6 0 6 5 4 2 8 2 3 3 F D 3 5
  • Angular JS未知提供者错误

    删除 Bower components 并清理缓存后 我使用 Bower install 重新安装了依赖项 该应用程序无法加载并出现以下错误 未捕获的错误 injector unpr 未知提供程序 forceReflowProvider 这
  • AngularJS limitTo 按最后 2 条记录

    可以结合AngularJS吗filter https docs angularjs org api ng filter filter order https docs angularjs org api ng filter orderBy
  • 从 mvc web api httpresponse 生成 csv 并通过 angularjs 接收以供下载

    我正在尝试从我的 Web api 生成一个 CSV 文件并通过 angularjs 接收该文件 我有一个如下所示的 API 控制器 HttpPost public HttpResponseMessage GenerateCSV FieldP
  • 使用 ui-router 的 angular.js,如何仅重新加载一个视图?

    我有一个相当简单的待办事项应用程序 使用 angular js 我正在使用 ui router 库 我查看了 github 上的 ui router 示例 https github com angular ui ui router tree
  • AngularJS 中“href”和“ng-href”的区别

    我都用过href and ng href我看不出它们之间的区别 为什么 Angular 有ng href属性 什么时候应该使用它 从文档中 https docs angularjs org api ng directive ngHref 使
  • Angular UI 路由器嵌套视图问题

    我在理解 Angular UI Router 嵌套视图的工作原理时遇到了一些问题 我的 stateProvider 看起来像这样 stateProvider state login url login views main template
  • AngularJS templateUrl 与 template - 隔离范围

    我有以下指令 offerListSorters directive offersSorter myState templateCache function myState templateCache return scope control
  • Firebase 未定义?

    我正在开发一个 Angular 项目并使用 Firebase 但出现错误ReferenceError Firebase is not defined 但我不明白为什么 这是我的index html
  • AngularJS 不再在 Firebug 控制台中显示特定错误

    我在我的应用程序中使用 AngularJS 和 Angular Material 库 问题是 每当控制器的任何功能发生任何错误时 它都不会显示特定的错误 而是每次都会显示相同的一般错误 通过查看这些错误 您无法确定出了什么问题 这是我的控制
  • 如何使用 AngularJS ngView 为未经授权的用户隐藏模板?

    我有一个基本的 PHP 应用程序 其中用户登录信息存储在 HTTP 会话中 该应用程序有一个主模板 例如index html 它使用 ngView 切换子视图 如下所示 div div 现在 这个主模板可以通过基本的 PHP 控件进行保护
  • 如何将一个“模型”映射到两个字段?

    我有一个具有 高度 属性的模型 我希望允许用户将其编辑为两个单独的字段 英尺 和 英寸 但让它们映射到以英寸为单位测量的单个属性 高度 表格看起来像这样 在这些字段和单个 高度 属性之间创建双向绑定的最佳方法是什么 HTML
  • 是否可以连接 Angular ng-options 中的值

    基本上 我试图填充一个选择框 但连接来自first name列和last name column 我想做的 不起作用
  • Angular-Datatables + Angular-xeditable:取消可编辑行

    当组合 Angular DataTables 和 Angular XEditable 时 添加新行时会取消可编辑行 这是jsfiddle https jsfiddle net faj61h5d 10 示例操作如下 1 这是初始状态 2 将第
  • Angular 完成渲染后运行 jQuery

    我正在尝试使用 angularjs 中的 json 对象填充个人资料页面 我正在为此使用指令 我有一个配置文件指令 其中包含配置文件部分指令作为子项 配置文件部分具有作为子级的配置文件子部分指令 我需要在 Angular 开始编译之前和 A
  • 使用 eclipse IDE 配置 angularjs

    我想开始使用 AngularJs 和 Java Spring 进行开发 我使用 Eclipse 作为 IDE 我想配置我的 Eclipse 以使这些框架无缝工作 我知道我可能要求太多 但相信我 我已经做了很多研究 你们是我最后的选择 任何帮

随机推荐