在angular中，可以将ng-click注入到ng绑定的html div中吗？
在Angular中，ng-click是AngularJS的指令，用于绑定点击事件。然而，在Angular中，使用的是Angular的新版本，即Angular 2+，它采用了完全不同的架构和语法，不再使用ng-click指令。
在Angular中，可以使用(click)事件绑定来实现类似于ng-click的功能。可以将(click)事件绑定到HTML的div元素上，以响应用户的点击操作。例如：
<div (click)="handleClick()">点击我</div>
在上述代码中，(click)="handleClick()"表示将handleClick()方法绑定到div元素的点击事件上。当用户点击该div时，handleClick()方法将被调用。
需要注意的是，Angular中的事件绑定是通过一对圆括号来实现的，而不是使用ng-click指令。此外，Angular还提供了其他一些事件绑定的方式，如双向绑定（()）和属性绑定（attr）等。
关于Angular的更多信息和学习资源，可以参考腾讯云的Angular产品介绍页面：Angular产品介绍
相关·内容
2回答
如何限制按角键的点击次数？
angularjs
在点击次数等于在文本男孩中输入的值后，我试图使按钮非功能性。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Student <input type="input" ng
浏览 3提问于2020-06-19得票数 0
回答已采纳
1回答
扩展ngClick以添加附加功能
javascript、angularjs、angularjs-directive
大家好，有什么方法可以扩展内置指令吗？
这就是我想要做的。
例如，我的指令模板是：
<div ng-click="condition && handleClick()" ng-transclude></div>
这里的条件是是否执行对div的单击，所以当我重用指令并使其嵌套时，我会像这样结束。
注意:我的指令中的条件不会动态变化，这只是一个时间值。
<div ng-click="condition && handleClick()">
<div ng-cli
浏览 0提问于2015-04-25得票数 2
1回答
AngularJS设置服务的指令作用域变量
angularjs、angularjs-directive、angularjs-scope、widget、angularjs-factory
好的，我正在尝试制作一个简单的聊天小部件指令，我希望它是在我的应用程序上的任何地方创建的动态，也就是说，我不想要硬编码的解决方案。因此，我希望从服务创建指令，从而通过服务助手方法设置其作用域变量。我想我在一些angularjs的材料指令中看到了这方面的一些例子，例如，我想做这样的事情：
$mdToast.simple()
.textContent('Marked as read')
.action('UNDO')
但是，相反，我的聊天小部件将类似于：
$chatWidget.setParent(parent).setUser(user).setMessa
浏览 4提问于2018-02-19得票数 0
回答已采纳
3回答
在指令中调用$compile($element)($scope)的目的是什么？
javascript、angularjs、dom
角码涉及一个自定义指令，该指令使用$compile($element)($scope)并导致ng单击操作发生两次:我的问题是：
我想了解一下，为什么ng点击操作会发生两次？
调用$compile($element)($scope)的目的是什么？
如果它没有被调用，那么在什么情况下应该调用它呢？
以下是我到目前为止收集到的细节和资料：
我想了解一下，为什么ng点击操作会发生两次？下一行显示了自定义指令"hello“和ng-单击按钮。自定义指令调用$compile($element)($scope)，这是导致操作被触发两次的行，但我不明白怎么回事？
测试点击！
这是代
浏览 0提问于2015-01-15得票数 9
1回答
控制器通信指令
javascript、angularjs
我有一个用例，其中我想创建一个指令，它执行一些处理，并将数组返回给控制器。
我的指令看起来就像
angular.module('directives').directive('reuse','testService',function(testService) {
return {
restrict : 'E',
replace : true,
scope :
{ elements: '=elements
浏览 2提问于2017-01-09得票数 0
回答已采纳
1回答
如何在AngularJS组件中定义新变量
javascript、angularjs、progress-bar、components、angularjs-components
我已经尝试创建一个与进度条相对应的AngularJS组件。下面是为这个问题创建的JSFiddle，
下面是我的应用程序和组件定义：
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', function($scope) {
$scope.total = 20;
$scope.count = 15;
$scope.changeTotal = function(value){$scope.total += value};
$scope.
浏览 1提问于2016-07-11得票数 0
回答已采纳
5回答
以角度单击文本以显示div标记
javascript、jquery、html、css、angularjs
我想知道如何用角度来实现这一点，因为ng-click似乎是可以使用的，那么ng-model似乎可以使用它。
我想点击文本，然后让一个div显示它的内容，但是它不起作用。
我的小提琴
<div class="well" ng-controller="MyController">
<a class="btn btn-primary" ng-model="selMe" ng-click="handleAnchorClick()">Enter Address</a>
</d
浏览 7提问于2017-03-17得票数 0
回答已采纳
1回答
如何在AngularJS中同时处理DOM操作和状态更改？
javascript、angularjs、dom
<div my-directive>
<btn id="myBtn" ng-click="handleClick(mymodel.id)"><btn>
</div>
app.controller('myCtrl', function($scope) {
$scope.handleClick = function(id) {
//Do state change here but don't access DOM here.
}).
directive('myDir
浏览 1提问于2015-01-15得票数 0
3回答
在AngularJS中迭代使用ng-重复生成的元素。
javascript、html、angularjs
我的app.js：
var app = angular.module('factory', []);
app.controller('Ctrl', function($scope){
$scope.users =[
{name: 'jimbo', info: ''},
{name: 'bobby', info: ''}
];
$scope.addAllInfos = function(){
};
});
我的index.html：
浏览 4提问于2015-05-09得票数 1
回答已采纳
1回答
ng-repeat中的angularjs ng-model性能较差
javascript、performance、angularjs
在下面的场景中，我遇到了angular的性能问题：
<div ng-repeat="a in array">
<input ng-model="something">
</div>
我在控制器中编写了代码，在ng-click上将数组更改为具有不同的对象集。问题是，如果数组中有相当数量的对象，那么单击就不会像我希望的那样响应(短延迟)。
经过一些调查后，我注意到在我更改ng-click中的数组后，$digest需要相当长的时间。所以我创建了这个来重现它。
真实的应用场景是这样的:我有一个表，其中的每一行都表示一个可编辑的对象
浏览 25提问于2014-07-09得票数 21
回答已采纳
1回答
角自定义单击编辑-输入值到功能。
javascript、angularjs
我有一个基本的点击来编辑我的代码中的span字段，它会提示输入框和几个按钮：
<span ng-click="editField()" ng-if="edit === false">Your text to edit</span>
<div ng-if="edit === true">
<input type="text" ng-bind="data.field" value="Your text to edit" />
浏览 4提问于2014-06-03得票数 1
回答已采纳
3回答
在AngularJS组件中从父级到子级之间通信事件
javascript、angularjs、angular-directive、angular-components
在我正在进行的新项目中，我已经开始使用组件而不是指令。
然而，我遇到了一个问题，我找不到一个具体的标准方法来做它。
从子事件到父事件很容易通知，您可以在下面的plunkr中找到它，但是从父到子之间通知事件的正确方法是什么？
Angular2似乎通过使用这样的方法来解决这个问题：，但我不认为有可能像使用#timer的示例那样定义子组件的“指针”
为了能够轻松地转换到Angular2，我想避免：
事件发射(从作用域发射和广播)
使用来自子级的需求(然后向parent..UGLY添加一个回调)
使用单向绑定，在子区域注入作用域，然后“观察”此属性。更丑
示例代码：
var app
浏览 1提问于2016-05-25得票数 24
回答已采纳
1回答
在执行自定义指令操作之前，控制器变量未更新
angularjs、angularjs-directive
我是angularJS的新手(我知道现在学习angularJS为时已晚，但现在比never..Right更好？)并且一直在玩一些简单的任务。最近，我试图更深入地研究如何在控制器、自定义指令和自定义指令的控制器之间交换和更新数据。在一个简单的实现中，我尝试在自定义指令控制器中创建一个单击计数器，它将从主控制器启动count变量，并在自定义指令中对该变量进行计数操作。在custom指令中有两个计数操作。第一个操作是count +1，第二个操作是对另一个变量+2的操作。然后通过点击按钮“单击”，调用主控制器中的一个函数，然后将两个计数相乘并产生结果。
在这里，我面临的问题是：
单增量:1双增量:2结
浏览 1提问于2019-12-01得票数 1
2回答
AngularJS使用指令填充输入字段，但没有在$scope中捕获
angularjs、angularjs-directive、angularjs-scope
当我从指令中填充输入字段时，它会显示在DOM上，但是$scope没有捕获该值。我如何修复它，以便$scope捕获新信息？
如何复制我的行为：
Click Fill with Directive
Click Log
--> $scope.input val is undefined
Fill input with 'asdf'
Click Log
--> $scope.input val is 'asdf'
Fill input with 'abcd'
Click Fill with Directive
--> DOM sho
浏览 2提问于2014-04-20得票数 1
回答已采纳
2回答
为什么我的指令中的鼠标事件没有反映在视图中？
angularjs、angularjs-directive、angularjs-scope、angularjs-ng-click
下面是一个示例。请先打开控制台。
它有点长，所以要快速解释:你会看到两个div。一个是“规则”，另一个是通过指令创建的。它们都有单击事件处理程序(通过ng- click添加)。
单击常规(非指令) div执行我所期望的操作--范围中的适当变量将被设置，并且在视图中看到(输出中的前两行显示单击的div的id和顶部)。
问题是当单击指令div时。这些变量没有更新。我知道我对指令的范围有些误解，但让我困惑的是打印的日志消息(当您这样做时打开控制台)。将注册单击，控制器的作用域设置变量值，就像您在控制台中看到的那样。
但是html不更新--尝试单击一个div，然后单击另一个div，然后来回移动，您将看
浏览 3提问于2014-06-17得票数 1
回答已采纳
1回答
为什么模型不更新？
dart、angular-dart
我正在阅读棱角飞镖教程，我试着做一个项目列表，当点击一个项目时，用点击项目的文本填充一个输入。在我修改输入中的文本之前，这是正常的。之后，单击列表中的另一项不会更新输入字段中的文本(在此之前)，也不会修改列表中的项。
我的起点是2教程，但尝试将其与第一篇中的一些输入结合起来。
我的html文件：
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="wid
浏览 3提问于2014-04-02得票数 1
回答已采纳
3回答
DIV上的ng-模糊
javascript、angularjs、focus、blur
我正在尝试隐藏模糊上的DIV (焦点已从DIV中移除)。我使用的是angular和bootstrap。到目前为止，我已经尝试在DIV显示时设置"focus“，然后在用户单击屏幕上的其他位置时设置一个ng-blur函数。这不管用。
基本上问题是我不能通过JS在我的"#lockerBox“上设置焦点，我的"hideLocker”函数在点击我的DIV时没有问题。
<div class="lock-icon" ng-click="showLocker(result); $event.stopPropagation();"></d
浏览 1提问于2014-07-16得票数 12
2回答
如何在AngularJS指令中传递多个属性
angularjs
如何将多个属性传递给指令。如何在div下面传递点击编辑1的值12
<div click-to-edit="location.state" click-to-edit1=12></div>
并且应该可以在指令controller.please中访问帮助我。
代码：
应用程序HTML：
<div ng-controller="LocationFormCtrl">
<h2>Editors</h2>
<div class="field">
<st
浏览 7提问于2014-09-16得票数 0
2回答
在工厂中访问Angularjs指令作用域
javascript、angularjs
我运行的是Angular 1.4.3。
我正在尝试在angular中创建一个‘工厂’，帮助我在我的应用中创建一个通用的菜单系统。'gui‘工厂的'create’函数创建一个ul，并且可以使用ng-click来点击li元素。
此ul附加到文档正文。
ng-click应该会在我的工厂中执行'callMe‘函数，但是我不确定应该使用什么作用域...
代码：
var App = angular.module('App', ['ngRoute']);
App.factory('gui', function() {
var
浏览 1提问于2015-08-05得票数 0
1回答
Angular未在自定义指令内编译
javascript、angularjs
我有一个指令，看起来像这样：
app.directive('fieldsetCollapse', function() {
return {
restrict: 'A',
scope: {},
compile: function(tElement, tAttrs, transclude) {
var wrapperElement = angular.element('<div ng-show="isOpen"></div>'),
legendE
浏览 0提问于2012-10-26得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
