AngularJS:如何从 ui

编程入门 行业动态 更新时间:2024-10-27 09:46:16
本文介绍了AngularJS:如何从 ui-grid 单元格模板访问范围?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时送ChatGPT账号..

如何从 ui-grid 单元格模板访问 $scope?这是我的控制器代码:

app.controller('MainCtrl', ['$scope', function ($scope) {//我想从单元格模板中引用它.$scope.world = function() { return 'world';};$scope.gridOptions = {数据: [{ id: "item1" },{ id: "item2" }],列定义:[{字段:'id',//world() 永远不会被调用,也不会显示.cellTemplate: '<div>{{ "hello" + world() }}</div>'}]};}]);

在这里查看它的实际效果:http://plnkr.co/edit/WYXeQShHWKDYDs4MIZnP?p=preview

我希望单元格内容显示hello world",但它们只显示hello".

解决方案

根据 http://ui-grid.info/docs/#/tutorial/305_appScope,网格有自己的独立作用域,所以你需要使用grid.appScope来访问你的应用程序作用域.解决办法是将单元格模板改为:

 cellTemplate: '

{{ "hello " + grid.appScope.world() }}</div>'

How does one access $scope from a ui-grid cell template? Here's my controller code:

app.controller('MainCtrl', ['$scope', function ($scope) {

  // i want to reference this from a cell template.
  $scope.world = function() { return 'world'; };

  $scope.gridOptions = {
    data: [
      { id: "item1" },
      { id: "item2" }
    ],
    columnDefs: [
    {
      field: 'id',

      // world() is never called and is not displayed.
      cellTemplate: '<div>{{ "hello " + world() }}</div>'
    }]
  };
}]);

See it in action here: http://plnkr.co/edit/WYXeQShHWKDYDs4MIZnP?p=preview

I would expect cell contents to show "hello world", but they just show "hello".

解决方案

According to http://ui-grid.info/docs/#/tutorial/305_appScope, the grid has its own isaloted scope, so you need to use grid.appScope to access your application scope. The solution is to change the cell template to:

  cellTemplate: '<div>{{ "hello " + grid.appScope.world() }}</div>'

这篇关于AngularJS:如何从 ui-grid 单元格模板访问范围?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

更多推荐

[db:关键词]

本文发布于:2023-04-21 05:49:26,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/997786.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:AngularJS   ui

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!