AngularJs:为此我的控制器中是否需要 $scope ?

2024-02-03

我正在尝试效仿这个笨蛋 https://embed.plnkr.co/plunk/2rCcJN,特别是向 ag-grid 的每一行添加一个按钮。

function ageClicked(age) {
    window.alert("Age clicked: " + age);
}

function ageCellRendererFunc(params) {
    params.$scope.ageClicked = ageClicked;
    return '<button ng-click="ageClicked(data.age)">Age</button>';
}

农业电网呼叫ageCellRendererFunc渲染单元格。它正在生成一些 HTML 来呈现一个按钮,单击该按钮时将导致ageClicked被称为。

That params.$scope.ageClicked = ageClicked;似乎正在分配一个$scope变量,在按钮代码中使用:'<button ng-click="ageClicked(data.age)">Age</button>'.

我不确定分配一个$scope变量,以及为什么我们不能只引用一个$scope功能。可以吗?

更重要的是,我不注射$scope进入我的控制器,因为我使用constroller as视图中的语法。

我如何才能获得一段类似的代码,将 HTML 按钮添加到ag-grid细胞,使用controller as sytax?


[更新] 上面引用的 Plunker 使用了非常旧的 ag-grid 版本。

  1. 我想使用最新版本 v22
  2. 我不想使用$scope or $rootscope, just this and controller as syntax
  3. 每行应包含一个单元格,该单元格显示一个按钮,单击该按钮时,会执行一个以某些行数据作为参数的函数(就像 Plunker 中的“年龄”,但满足此列表中的 1 和 2)

It is a $scope inside ag-grid(笨蛋)

在调用之前ageCellRendererFunc

function ageCellRendererFunc(params) {
    params.$scope.ageClicked = ageClicked;
    eturn '<button ng-click="ageClicked(data.age)">Age</button>';
 }

它初始化params (4012):

RenderedCell.prototype.createParams = function () {
            var params = {
                node: this.node,
                data: this.node.data,
                value: this.value,
                rowIndex: this.rowIndex,
                colDef: this.column.colDef,
                $scope: this.scope, // <----
                context: this.gridOptionsWrapper.getContext(),
                api: this.gridOptionsWrapper.getApi()
            };
            return params;
        };

所以你可以使用controller as

module.controller("exampleCtrl", function($http) {
  var vm = self;
  /* ... */
 }

带 vm 的柱塞 http://plnkr.co/edit/41vsiT9D0Bdi08mX


EDIT 1

这是一个plunker http://plnkr.co/edit/YS6YEATaq0lMFw4L使用 ag-grid 22.0.0

(Added agGrid.initialiseAgGridWithAngular1(angular))

这段代码很好:

function ageCellRendererFunc(params) {
    params.$scope.ageClicked = ageClicked;
    return '<button ng-click="ageClicked(data.age)">Age</button>';
 }

正如你提到的$scopeparams而不是你的控制器。您的控制器不使用$scope根本不。这是ag-grid的定义。开发人员可以使用另一个变量 -bob语法将是params.bob.ageClicked = ageClicked;

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

AngularJs:为此我的控制器中是否需要 $scope ? 的相关文章

  • ui-sref 和变量状态参数名称

    我想呈现一个链接 例如 a 其中州名myState和钥匙myKey是变量 有办法做到这一点吗 我发现自己处于同样的情况 我也无法完成这一点 尝试使用 ng click 移动代码 并在 ng click 函数内部使用 stage go htt
  • AngularJS templateUrl 与 template - 隔离范围

    我有以下指令 offerListSorters directive offersSorter myState templateCache function myState templateCache return scope control
  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer
  • 为什么还是filter和orderBy的优点呢?

    看来 AngularJS 确实非常重视在视图中使用过滤器和其他 ng 指令来过滤和排序数据 而不是在模型中手动执行 这有什么原因吗 比如速度更快 有缓存还是其他原因 例如 我想显示一个已排序的列表 但我也想访问已排序的列表以用于与视图无关的
  • 如何在输入框中应用多个 ng-pattern 或条件

    条件第一 a zA Z 5 d 4 a zA Z 1 条件二 a zA Z 4 0 9 5 a zA Z 1 g html
  • AngularJS工厂如何返回一个对象

    我有一个要求 我应该在其中编写工厂 这个工厂应该包含3个函数init save和delete 我应该从控制器调用 init 函数 该函数返回一个对象 该对象具有执行添加和删除功能的功能 我怎样才能做到这一点 以下是我的代码 它成功执行了 i
  • AngularJS 和 PouchDB 服务的单元测试

    我正在尝试对我的个人 Angular 工厂进行单元测试 但很难尝试正确模拟和注入 PouchDB 对象 我的工厂代码目前如下 factory Track function var db new PouchDB tracks var reso
  • Ag-grid(Angular 2) 无法访问 CellRenderer 中的组件字段

    我在尝试对使用 cellRenderer 创建的按钮的单击事件调用服务方法时遇到此问题 我正在将 ag grid 与 Angular2 一起使用 headerName Update field update width 80 cellRen
  • 使用 AngularJS 制作 Windows Phone 全景图

    我正在尝试在 AngularJS 应用程序中复制 Windows Phone Ui 这是一个example http www expertreviews co uk gallery features 1295629 designing wi
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • AngularJS 指令 - 设置多个指令元素的顺序(不是指令的优先级,而是元素的优先级)

    考虑带有指令 foo 的标记 div div div div div div 使 foo 按指定顺序而不是从上到下 3 1 2 运行的好方法是什么 我唯一能想到做的就是跟踪已运行的内容并在不按顺序的项目上返回 false 然后让 Angul
  • 如何使用 Angular Kendo UI 刷新网格数据源

    我使用 Angular Kendo UI 项目将 Telerik Kendo 网格与 Angular 结合起来 我有以下标记 div style height 600px div 以及我的控制器中的以下代码 scope thingsOpti
  • 在 Angular 中,promise 的 error 和 catch 函数在概念上有什么区别?

    我终于得到了 Angular Promise 错误处理 但这对我来说是违反直觉的 我期望错误由失败回调来处理 但我不得不使用 catch 我在概念上不太明白为什么执行 catch 而不是失败回调 我所期望的 SomeAsyncService
  • 使用 eclipse IDE 配置 angularjs

    我想开始使用 AngularJs 和 Java Spring 进行开发 我使用 Eclipse 作为 IDE 我想配置我的 Eclipse 以使这些框架无缝工作 我知道我可能要求太多 但相信我 我已经做了很多研究 你们是我最后的选择 任何帮
  • 对自定义属性使用 data- 而不是 x- 前缀有哪些优点?

    AngularJS 文档says https code angularjs org 1 0 8 docs guide directive Optionally the directive can be prefixed with x or
  • Angular ui 路由器单元测试(状态到 url)

    我在应用程序中对路由器进行单元测试时遇到一些麻烦 该应用程序是基于 Angular ui 路由器构建的 我想要测试的是状态转换是否适当地更改了 URL 稍后会有更复杂的测试 但这就是我开始的地方 这是我的应用程序代码的相关部分 angula
  • WebStorm 修改 URL

    我们使用两个 IDE 来开发 Angular js 应用程序 Brackets v1 7 WebStorm v2016 2 通过 Brackets IDE 打开应用程序时 URL 将按预期显示 http 127 0 0 1 55738 in
  • 将 JS 库 xml2js 与 Angular 2 结合使用

    我正在尝试在 Angular 2 带有 TypeScript 的 RC 1 Web 应用程序中使用 xml2js 作为 XML 解析器 但是我只收到一些错误并且没有有效的解决方案 这是我一步一步所做的 通过安装 xml2jsnpm inst
  • ng-submit 和 ng-click 在 ionic iPhone 应用程序中多次触发

    我正在尝试离子框架 它看起来非常好 但是 我在提交表单时遇到问题 表单触发两次 首先是按下提交按钮时 然后是点击屏幕上的任意位置 这种情况在 xcode 模拟器和我的 iphone 4gs 上都会发生 这就是我所做的 我使用以下命令安装侧菜
  • 正确设置 Laravel 5 CSRF 令牌的标头

    好吧 已经搜索这个问题好几个小时了 只是找不到解决方案的开始 我正在使用 angularJS 前端和 laravel 后端 Restangular 是我的通讯服务 我的 POST 很好 因为我可以在数据中包含 token 并且它会起作用 但

随机推荐

  • 从 Firebase Promise 分派操作后,ngrx 商店不更新 UI

    我正在尝试使用 Angular 4 开发一个基本的 NativeScript 应用程序 我还使用 ngrx 存储和 firebase 作为实时数据库 当我使用示例数组并更新存储而不与 firebase 集成时 程序工作正常 UI 也得到更新
  • 在 Tkinter python 中相对于父窗口放置子窗口

    我有一个包含按钮的父小部件 当按下按钮时 我想在与其左侧对齐的父窗口小部件正下方打开一个无边框 即没有 Windows 装饰按钮 窗口 我很困惑 似乎 设置窗口位置的唯一方法是使用 geometry 但更糟糕的是 我似乎无法获得父小部件的绝
  • 在 Windows 中为 Docker 容器增加 GB 的 RAM

    我正在关注这个教程https docs docker com docker for windows docker settings dialog https docs docker com docker for windows docker
  • 如何从本地路径ios swift加载图像(按路径)

    在我的应用程序中 我将图像存储在本地存储中 并将该图像的路径保存在数据库中 如何从该路径加载图像 这是我用来保存图像的代码 let myimage UIImage UIImage data data let fileManager NSFi
  • jQuery mobile:如何调用此(默认)错误加载页面消息?

    我正在构建 RESTful 移动应用程序 我喜欢找不到资源时的默认行为 jQuery Mobile 显示了这一点 但是 当我在 onError 中执行自定义 AJAX 时 因为未找到资源 我想显示奇特的消息 但是 我的代码中没有任何反应 默
  • bigtable、cassandra、simpledb、dynamo、couchdb、hypertable、riak、hbase,它们有什么共同点?

    抱歉 如果这个问题有点主观 我对 可以存储 分布式存储 或类似的概念很陌生 我真的很想知道它们有什么共同点 并希望对它们有一个总体的了解 如果我想写一个类似这样的产品 我需要准备什么 The NoSQL 数据库站点 http nosql d
  • 无法更新或安装包:已添加具有相同密钥的项目

    Problem 在特定项目中 我无法更新或安装任何 NuGet 包 当我尝试使用 NuGet GUI 执行此操作时 它会执行一些操作 然后停止运行 什么也不说 当我尝试使用包管理器控制台执行此操作时 我得到以下输出 PM gt Update
  • Julia 0.6中不同类型词典的向量

    我对新的有点困惑whereJulia 0 6 中的语法 我有这样的事情 a Dict a gt b b Dict a gt 3 c Dict a gt c 我想要一个接收字典向量而无需进行显式转换的函数 我尝试过 function bbb
  • 将 jQuery fullcalendar 集成到 PHP 网站中

    我想将 jQuery fullcalendar 集成到我的 PHP 网站中 但我不知道如何处理该事件以及如何使用 MySQL 中的 JSON 数据 任何意见 将不胜感激 确保你的 PHP 可以输出 f以下 HTML 代码 http docs
  • 在项目中使用 Node.js 作为独立的 LESS 编译器?

    我一直在尝试将lessc https github com cloudhead less js tree master bin在一个大型项目中使用 Bootstrap 进行基本设置的编译器 只会导致各种编译错误 每个人都有不同解决方案的票证
  • 服务上的 AccessViolationException

    我正在运行一项服务 该服务连接到一些客户端 它已经启动并运行了几周 这个函数每分钟都会被调用很多次 我在不同的函数中有一些捕获 但是这个异常使它一路崩溃 我以前从未见过这个问题 谁能让这一切发生 Stack Framework Versio
  • 资源与 SQLite

    我正在尝试分析对于需要附带相当大量文本 几本书 的应用程序使用 SQLite 与使用资源之间的权衡 我读了这篇关于原始 XML 文件与 SQLite 的文章 https stackoverflow com questions 5213550
  • 使用 Capistrano 的 Git 工作流程

    我正在尝试使用 capistrano 来了解一个良好的 git 工作流程 我找到了一个few http nakedstartup com 2010 04 simple daily git workflow good http reinh c
  • 如何生成 AdWords API 脚本的 USER_AGENT

    生成 USER AGENT 以使用 Python 从 AdWords API 提取数据的最有效方法是什么 该值是我需要能够提取数据的最后一个值 任何帮助将不胜感激 user agent INSERT USER AGENT HERE 值得庆幸
  • SublimeText 片段的正则表达式

    我现在已经在这个 Sublime Snippet 上停留了一段时间了 我想在创建新类时显示正确的包名称 使用TM FILEPATH and TM FILENAME 打印时TM FILEPATH变量 我得到这样的东西 Users caubry
  • 一个小游戏/测验:你看到我的价值观了吗? (解释十六进制值)

    好的 我需要一些帮助 我有一个蓝牙体重秤 我可以将我的 Raspberry Pi 连接到该秤并获取一些数据 但对我来说 在这个六角沙拉中读懂我的价值观并不容易 每次测量后 我都会得到两行信息 其中应包含我的值 我模拟了所有测量结果 第5个人
  • 错误:未定义模板 'llvm::yaml::MissingTrait 的隐式实例化

    我正在开发一个使用 LLVM YAML I O 库的项目 这是我正在遵循的文档 教程 https www llvm org docs YamlIO html https www llvm org docs YamlIO html 我正在尝试
  • OSX - 通过缩放按钮禁用全屏模式?

    我正在寻找以下任一设置选项NSWindow在 XIB 编辑器中或通过编程方式我可以禁用全屏模式特色于OS X当用户单击缩放按钮 绿色交通灯 时 因为它不适合我的 UI 设计 相反 将其用于正常的窗口缩放 任何人都可以给我一些提示 去哪里寻找
  • 为什么这个 Java 8 lambda 无法编译?

    以下 Java 代码无法编译 FunctionalInterface private interface BiConsumer
  • AngularJs:为此我的控制器中是否需要 $scope ?

    我正在尝试效仿这个笨蛋 https embed plnkr co plunk 2rCcJN 特别是向 ag grid 的每一行添加一个按钮 function ageClicked age window alert Age clicked a