程序员经验分享-hwhale

为什么 ng-click 不起作用？

2024-04-10

为什么这个简单的 ng-click 示例不起作用？我已经在生产中使用 Angular 几个月了，但是这个笨蛋让我感到困惑。

http://plnkr.co/edit/9Rp5JD?p=preview http://plnkr.co/edit/9Rp5JD?p=preview

如果您注意到，ng-show 属性正在工作......为什么没有点击？它始终提醒默认值而不是角度点击。

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>

没有孤立的作用域，根本没有指令......只是一个 div 。您可以删除 onclick...其他警报永远不会触发。我确信无论问题是什么，我都变得目光短浅而无法找到它。

其余无聊的配置：

angular.module('plunker', []);

var app = angular.module('plunker', [
    'plunker'
]);



app.config( function( ) {
        'use strict';
});



app.controller('MainCtrl', function($scope) { 
  var that = this;

  $scope.showTest = true;

});

整个html：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected] /cdn-cgi/l/email-protection" src="https://code.angularjs.org/1.2.6/angular.js" data-semver="1.2.25"></script>

  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">

<br/><br/>

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>


</html>

Angular 的表达式不使用eval函数所以除非你定义了一个名为的函数alert在你的作用域链中的某个地方它不会执行。

https://docs.angularjs.org/guide/expression#context https://docs.angularjs.org/guide/expression#context

Angular 不使用 JavaScript 的 eval() 来计算表达式。 相反，Angular 的 $parse 服务会处理这些表达式。

角度表达式无法访问全局变量，例如 窗口、文档或位置。这个限制是有意为之的。它 防止意外访问全局状态——一个常见的来源 微妙的错误。

相反，在调用的函数中使用 $window 和 $location 等服务 从表达式。此类服务提供对全局变量的可模拟访问。

所以你必须在你的范围内定义这样一个函数：

app.controller('MainCtrl', function($scope,$window) { 
  var that = this;

  $scope.showTest = true;
  $scope.alert = function() {
    $window.alert('angular click');
  };
});

DEMO

angular.module('plunker', []);

var app = angular.module('plunker', [
    'plunker'
]);

app.config( function( ) {
        'use strict';
});

app.controller('MainCtrl', function($scope,$window) { 
  var that = this;

  $scope.showTest = true;
  $scope.alert = function(text){
     $window.alert(text);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS

onclick

为什么 ng-click 不起作用？ 的相关文章

  • 将元素追加到 Angular QueryList

    有没有办法将新元素追加到 QueryList 中 例如 我有一个像这样的查询列表 ContentChildren SysColumn syscolumns QueryList

  • 停止所有 JavaScript 执行

    是否有一个相当于 php die 函数的 javascript 可以停止所有 javascript 包括将来的 ajax 请求回调 超时等 运行 注意 我无法在调试器中使用断点 因为 bug 存在于 ie8 中 并且调试器会阻止您在断点处向

  • 如何使用 vue-toastification

    我刚刚将在 vue 3 中创建的项目迁移到 nuxt 3 以前我使用了 vue toastification 模块 但现在我不知道如何正确导入它 我的代码使用这个模块 import useToast POSITION from vue to

  • 无法使用服务帐户查询 Google Search Console API

    我需要使用服务帐户从 Google Search Console 网站管理员工具 检索一些数据 到目前为止我已经能够检索到access token对于我需要附加到请求的 url 的服务帐户 问题是我找不到办法这样做 这是我正在使用的代码 f

  • 使用终端将信息输入 Javascript

    我想获取 C 程序的输出并将其输入到 javascript 文件的标准输入中 但是我无法使用该方法将任何内容推送到标准输入中 node example js lt test txt 因为我收到以下错误 示例 js 35 stdin setR

  • HTML5 - 创建画布视口

    我有一个 2D 数组 宽 30 下 20 然而 视口仅绘制横向 15 和向下 10 的内容 我最初有一个这样的游戏 我一直在努力实现这样的目标 这是我的小提琴 http jsfiddle net sTr7q http jsfiddle ne

  • 使用带有代码分割的汇总时，有什么方法可以保留包的目录结构吗？

    Context 给定这样的项目结构 src a module js b module js util js 两者都在哪里module js文件导入util js 使用以下配置 export default experimentalCodeS

  • 如何通知 AngularJS 表单已由 jQuery 外部填写？

    我在 AngularJS 中有一个页面 其中有一个包含一些字段的表单 加载该页面后 我想要一个书签 单击该书签可根据配置文件中的数据填充字段 正在使用一个 JS 文件 该文件使用 jquery 来填充表单中的数据 当我做 id val ab

  • FindAndUpdate 如何检查文档是否真的更新

    想象一下以下模型 var Office id 1 name My Office branches adddress Some street that avenue isPrincipal true adddress Another addr

  • escape()、encodeURI()、encodeURIComponent() 之间的区别

    在 JavaScript 中 它们之间有什么区别 escape unescape encodeuri decodeuri encodeURIComponent decodeURIComponent 对于有视觉头脑的人来说 这里有一个表格显示

  • Twitter-Typeahead 不提供建议

    我正在尝试使用twitter typeahead rails 我的目的是当我在 Typeahead 输入框中键入内容时 通过下拉框建议模型 User 的实例 但是 当我打字时什么也没有发生 有人看到我的代码有什么问题吗 Gemfile ge

  • 使用 JS 或 Jquery 禁用浏览器窗口中的声音

    有没有办法禁用可能嵌入视频的浏览器窗口上的所有声音 我不是在寻找特定的解决方案 例如使用 js 等定位 Youtube 我需要一些通用的东西来关闭该页面的所有声音 这样如果任何视频播放它就没有声音 需要一些在页面级别关闭声音的东西 而不是通

  • Angular Xeditable 下拉菜单 e-ng-change 不起作用

    我在用着角度可编辑 http vitalets github io angular xeditable editable tableapi 我需要根据下拉列表的值更改文本字段的值 但它不起作用 你能告诉我为什么吗 谢谢 Html td sp

  • JQuery 从 Div 中抓取文本减去子元素[重复]

    这个问题在这里已经有答案了 有没有一种简单的方法可以从这个 div 中获取文本而不获取任何子元素 div strong Title Text Unwanted strong This is the text I need div 我知道我可

  • 自定义指令模型在 ng-switch 中不起作用

    我试图使用 AngularJS 提供一个可切换的下拉列表 其中选择各种选项将触发不同的列表 ng switch似乎是正确的方法 但我的ng model在内部时不具有约束力ng switch 如果我不使用 绑定工作正常ng switch 但如

  • 在基于 AngularJS 的 Web 应用程序中使用 Selenium

    我逐渐知道 Selenium 是 UI 测试之父 现在我的问题是为什么 Angular 团队开发了 Protractor 对于基于 AngularJS 的 Web 应用程序 Selenium 不能完成同样的工作 Protractor 所做的

  • 如何通过 JQuery Post 传递 Javascript 数组，以便可以通过 PHP $_POST 数组访问其所有内容？

    如何通过 JQuery Post 传递 Javascript 数组 以便可以通过 PHP POST 数组访问其所有内容 请展示一个可以实现此目的的代码示例 Thanks 如果你想传递一个 JavaScript 对象 哈希 即 PHP 中的关

  • 使用 javascript 在字符串中查找电子邮件地址

    我想做的是从字符串中提取电子邮件地址SomeName First email protected cdn cgi l email protection 这是我已经尝试过的代码 var stringToSearchIn SomeName Fi

  • Three.js - 将 WebGL 和 CSS3D 与 iFrame 混合

    我准备了一个混合的工作页面WebGL and CSS3D 在SO的一点帮助下here https stackoverflow com questions 24681170 three js properly blending css3d a

  • 将 JS 文件导入 Typescript

    我正在考虑转向 Typescript 目前正在考虑慢慢地 如果可能的话 逐个文件地执行此操作 现在我目前拥有的系统是用 Webpack 构建的 我想继续这个来构建我的整个包 我有一个用于定义的 d ts 文件 但我需要继续导入当前引发错误的

随机推荐

  • 关于 NSRunLoop，需要澄清

    When i Logger logger Logger new NSURL url NSURL URLWithString http www google com NSURLRequest request NSURLRequest requ

  • 如何使用 Linq To XML 获取元素值

    使用 Linq To XML 如何从下面的 xml 中获取 space id 值 720 我在读this http msdn microsoft com en us library bb308960 aspx但我认为xml中的命名空间是我的

  • 让 GitLab CI 克隆私有存储库

    我设置了 GitLab 和 GitLab CI 来托管和测试我的一些私人存储库 对于此系统下的作曲家模块 我设置了 Satis 来解析我的私有包 显然这些私有包需要 ssh 密钥来克隆它们 并且我在终端中可以使用它 我可以运行compose

  • ADO.Net (Azure AD) 错误“不支持关键字：身份验证”

    我正在尝试通过 C 代码使用 Azure AD 凭据连接到 Azure 数据库 代码如下 它在我的系统上运行良好 但是当我将它部署到32位VM时 它显示错误 不支持关键字 身份验证 VM 安装了 Net Framework 4 5 但未安装

  • 仅 Detox 测试启动画面

    我正在我的 React Native 项目上运行 detox 并且只能测试启动屏幕 启动屏幕进入登录屏幕 但排毒代码不允许我测试此元素 测试代码 describe Splash gt beforeEach async gt await de

  • java - 如何检查我的对象是否属于给定类的类型？

    我的方法获取 Class 作为参数 我必须检查我的变量是否属于 class 类型 Volvo v1 new Volvo Class aClass v1 getClass check aClass 在里面我需要做类似的事情 v2 instan

  • 输出到另一个窗口

    有没有办法直接在 VB NET 中打开窗体并在第二个监视器中最大化 也就是说 如果显示两个监视器 默认情况下第二个窗口中的表单加载会最大化吗 假设一个程序是用两种形式编写的 并且一台计算机连接了两个显示器 我希望 FormA 默认显示在 M

  • PyCharm：无法使用 docker-compose 创建远程 python 解释器

    尝试在 PyCharm 中创建 docker compose python 解释器时出现错误 解析 Users belek Projects project docker compose yml 时出错 进程docker compose c

  • 按一列中的因素拆分/子集数据框[重复]

    这个问题在这里已经有答案了 我的数据是这样的 例如 ID Rate State 1 24 AL 2 35 MN 3 46 FL 4 34 AL 5 78 MN 6 99 FL Data structure list ID 1 6 Rate

  • 致命错误：AST 文件格式错误或损坏 - Xcode

    在最新版本的 Xcode 中构建我的应用程序时出现此错误 致命错误 AST 文件格式错误或损坏 无法加载模块 Users me Library Developer Xcode DerivedData ModuleCache XYZYIE6Z

  • CMake FindThreads.cmake 找不到我的 pthreads.h 标头

    我在用着android cmake http code google com p android cmake 编译 Android 应用程序 这实质上创建了一个 CMake 工具链文件 用于使用 Android NDK 提供的工具链 As

  • Markdown 中的 RTL

    是否有任何现有的 Markdown 插件规范包含对 RTL 语言的支持 我希望是这样的 This paragraph is left to right lt This paragraph is right to left 或者其他什么 我可

  • Jquery Sortable，通过拖出删除当前Item

    我的问题 sortable 事件 out 当我在列表中拖动某些内容或对列表进行排序时触发 但我只想在拖出项目时启动该功能 My code document ready function ust div1 sortable out funct

  • 正则表达式最多匹配 4 个空格

    我有一个正则表达式来匹配一个人的名字 到目前为止 我有 a zA Z s 但我想添加一个检查以允许最多 4 个空格 我该如何修改它才能做到这一点 Edit 我的意思是字符串中任意位置有 4 个空格 不要尝试使用正则表达式验证名称 人们可以随

  • 如何使用 Bincode 在 Rust 中序列化 Enum，同时保留 Enum 判别式而不是索引？

    我一直在使用 bincode 在 Rust 中序列化枚举 但我面临一个问题 我收到枚举变体的索引而不是其指定的判别式 这是我尝试序列化的枚举的示例 derive Debug PartialEq Eq Serialize Deserializ

  • 在错误位置寻找模块的代码

    我使用 build dojotoolkit org 我的第一次尝试 创建了一个包含 3 层的多层构建 dojo js dojox js dijit js 每个 js 文件都上传到自己的文件夹中 dojo dojox dijit 当我运行代码

  • pip - 即使安装成功后也没有名为“pip”的模块

    我正在尝试在 Windows 10 系统上安装 pip 我得到了 get pip py 文件并运行了命令 python get pip py 这是终端的快照 python get pip py Collecting pip Using ca

  • 限制视图中的字符/单词 - Ruby on Rails

    我正在使用 Ruby on Rails 构建的一个非常简单的博客应用程序的主页上显示最近的评论 我想限制评论表的 正文 列中显示的字符数 我假设我可以在 的代码末尾添加一些内容 但我还不知道那会是什么 因为我对 Ruby 和 Rails 都

  • HttpClient 中的角度变化检测

    我有一个HttpClient正在更新后端数据的服务 在后端处理期间 我通过执行以下操作来显示加载状态this isLoading true 成功处理后 我将删除该加载状态subscribe 通过使用this isLoading false

  • 为什么 ng-click 不起作用？

    为什么这个简单的 ng click 示例不起作用 我已经在生产中使用 Angular 几个月了 但是这个笨蛋让我感到困惑 http plnkr co edit 9Rp5JD p preview http plnkr co edit 9Rp5

热门标签