Angular 1.2:自定义指令的动态内容: ng-click不起作用
Angular 1.2是一个流行的前端开发框架，它提供了许多功能和特性来简化和加速Web应用程序的开发过程。在Angular 1.2中，自定义指令是一种强大的工具，可以扩展HTML的功能，使开发人员能够创建可重用的组件和交互式元素。
在自定义指令中，ng-click是一个内置的Angular指令，用于在元素被点击时执行特定的操作。然而，有时候在动态内容中使用ng-click可能会出现不起作用的情况。这可能是由于以下几个原因：
- 作用域问题：ng-click指令依赖于作用域来执行相应的操作。如果动态内容的作用域与ng-click指令所在的作用域不一致，ng-click可能无法正常工作。解决这个问题的方法是确保动态内容的作用域正确绑定到ng-click指令所在的作用域。
- 编译顺序问题：在Angular中，编译顺序非常重要。如果ng-click指令在动态内容被编译之前就被解析了，那么ng-click可能无法正确绑定到动态内容上。解决这个问题的方法是使用$compile服务手动编译动态内容，并确保ng-click指令在动态内容被编译后再进行解析。
- 错误的使用方式：有时候ng-click不起作用是因为它被错误地使用了。确保ng-click指令被正确地应用在可点击的元素上，并且绑定的表达式是有效的。
综上所述，解决ng-click不起作用的问题需要注意作用域、编译顺序和正确的使用方式。如果您需要更详细的解决方案或示例代码，可以参考腾讯云的Angular文档和教程，链接地址为：腾讯云Angular文档。
相关·内容
如果在统计链接上使用angular js脚本ng-click属性，则可以很好地运行如下所示的代码
<div class="modal fade" id="cModal" ng-controller="modalController">
<li id="modalp1" class="active"><a ng-click="parentOptions()" href="#">Add Parent</a></li>
<
浏览 0提问于2014-01-02得票数 4
我正在使用angular-gridster来设计动态用户仪表板。我们如何让gridster widget数据内容响应性，同时调整widget回调的大小，有谁能建议我如何让它响应性。
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widge
浏览 1提问于2016-03-17得票数 1
var template ='<div id="'+'inst'+id+'" ng-click="setCurrentId('+id+')" >'+
'< {{$scope.somevariable}} data-role="listview" >'+
'<li><a href="acura.html">Acura</a></li>'
浏览 1提问于2013-07-17得票数 2
这就是我的问题:我使用ng-repeat动态创建按钮，但它们的ng-click不起作用。到目前为止，我必须编译这些按钮，以确保angular知道新的指令，但我不知道如何做到这一点。我试图创建一个新的指令来这样做，但我一定是做错了什么，因为它仍然不起作用。
HTML：
<div ng-controller="content">
<ul>
<li ng-repeat="item in items">
<span>item.text {{$index}}</span&
浏览 0提问于2013-04-07得票数 0
回答已采纳
1回答
我有一个带有动态文本的pre标记(加载页面时未知)。此文本可能有ng个命令。它看起来是这样的：
<pre>
Hello <span ng-click="test('args')">world</span> angular-JS!
</pre>
由于这些动态标记在页面加载时不存在，因此angularjs不会运行它们，函数test('args')也永远不会运行。
因此，我添加了一个名为compile-template的指令
function compileTemplate($compile, $
浏览 12提问于2017-08-30得票数 4
回答已采纳
如果您创建了一个动态加载HTML内容的指令，那么您似乎无法从生成的HTML调用该指令的函数。我的猜测是，内容在指令中生成后需要进行链接。我尝试在更改动态内容后编译元素，但这没有帮助。函数永远不会被调用。有没有办法做到这一点？(多谢了！)
在下面的代码中，您可以看到来自指令模板的对doIt()函数的静态调用。这是可行的。但是从动态内容中调用相同的函数是不起作用的。
下面是调用我的指令的元素：
<issue obj="obj" label="Make Dynamic Content"></issue>
这是我的指令：
(function ()
浏览 0提问于2016-10-14得票数 0
1回答
我在Angular中有这个函数，我在其中添加了一个新的幻灯片，并在其中单击一个ng。
var addSlide = function($scope, slideIndex, $event) {
slideIndex++;
var slider = angular.element('.slick-slider');
var currentSlide = slider.slick('slickCurrentSlide');
slider.slick('slickAdd', '<div class="slide&#
浏览 0提问于2015-05-27得票数 3
回答已采纳
我有一个用HTML动态填充的twitter bootstrap弹出窗口。在HTML中，是一个无序列表，其中包含li元素，这些元素包含ng-click属性，这些属性针对控制器上的方法……
但是，li元素ng-click事件不会触发。然而，我有一个按钮，它在页面加载时加载一个ng-click属性，可以完美地触发。但是，在动态HTML中，ng-click不起作用。我认为这是因为动态超文本标记语言由于某种原因不能访问$scope。有人知道怎么解决这个问题吗？
var popoverContent = '<ul class="list-unstyled
浏览 0提问于2013-11-26得票数 0
场景:我正在使用Angular js指令。我正致力于禁用元素(也就是所有的锚标记和按钮，除此之外，还有包含ng-click属性的div)。为此，我使用了两个指令。一个用于获取满足上述条件的所有元素，第二个指令用于覆盖该元素的单击事件。
问题:到目前为止，我成功地获得了元素，并在这些元素上动态地应用了指令。在此之后，我想禁用单击事件。我的问题是，如何使ng-click为空，然后一旦我的条件满足，我就必须执行相同的ng-click。注意:我正在使用$compile来编译内容的html。disableElement指令获取所有元素并将ng-click属性设置为null.But，但不知何故，它不起作用
浏览 1提问于2014-04-21得票数 1
我有过,
<div ng-app="s" ng-controller="ProductCtrl">
<div class="row" ng-bind-html="pager">
</div>
<div class="gallery-env">
<div class="row">
<div class="col-sm-4" ng-repeat="pr
浏览 0提问于2014-04-17得票数 0
我正在尝试理解angular的语法(昨天才开始)和实现以下内容的最好方法。我想要做的是加载一些已编译的html并将其注入到DOM中。这是这个问题的后续问题：。而不是调用
<div my-customer></div>
我想根据用户交互动态加载模板。可以这样说：
<div ng-click="loadMyCustomer()">load customer</div><!-- should load here -->
....
arcModule.controller('MainCtrl', functi
浏览 1提问于2013-12-20得票数 0
我正在从控制器1.0切换到1.2，在没有使用ng- angularJS在html中定义控制器的情况下，我在将控制器分配给具有干净作用域的指令时遇到了一些问题。
考虑以下场景：
var myApp=angular.module('myApp',[])
.controller('parentCtrl',function($scope,$element,$attrs) {
$scope.helloworld = function(){
console.lo
浏览 2提问于2013-12-06得票数 0
2回答
我仍然在学习Angularjs，我想将事件绑定在动态模板上，何时何地应该使用Angularjs的方式呢？除了直接将其放入模板ng-click之外
//template
<div ng-repeat="person in people"><span class="person" id="{{person.id}}" >{{person.name}}</span></div>
//Jquery version
$('.person').click(function(){
//get
浏览 4提问于2015-12-01得票数 2
回答已采纳
我有一个现有的单页网页应用程序，作为一个滚动自己的jQuery应用程序。我在尝试加入天使，但我遇到了一些麻烦。
我有一些HTML链接，我想让jQuery注册单击处理程序，但是让这些链接动态地将角视图加载到DOM中。如果我使用ng单击(页面2链接)，它可以正常工作。但是，我不想使用ng-click，因为我想执行我自己的SPA路由代码，我是在使用角之前编写的。我希望动态地获得作用域并触发ng click所触发的相同功能，但它不起作用：
<a id="aPage1" href="#">Page 1 Is Not Working</a>
<
浏览 3提问于2013-11-19得票数 1
回答已采纳
2回答
嗨，可重用按钮指令不起作用，
这里我创建了可重用的按钮指令，在下面我的代码静态按钮是工作的，但是动态(指令)按钮不工作。请检查下面的代码
谢谢你的帮忙
var app = angular.module('testApp', [ ]);
app.directive('telSavebutton', function() {
return{
restrict: 'E',
template: '<button type="submit" ng-click="testcontro
浏览 0提问于2015-12-11得票数 0
回答已采纳
我需要创建一个简单的表单，验证如下-
<div ng-app="module1" ng-controller="ctrl1 as vm">
<form novalidate name="vm.form1" class="css-form">
<label>Name:
<input type="text" name="Name" ng-model="vm.user.name" required />
&l
浏览 17提问于2017-01-20得票数 1
我正在尝试动态地追加具有AngularJS ng-click的元素，但它不起作用。我在iEl.append(<div>{{2+2}}<div>)中尝试过{{2+2}}，但它不起作用。
我做错了什么？
$scope.appendContent = function() {
var iEl = angular.element( document.querySelector( '#med2' ) );
iEl.append('<div class="row well" ng-controller=Directi
浏览 0提问于2016-01-01得票数 0
我使用()通过服务创建弹出窗口和调制解调器，但我想知道如何定制它们？例如，如何更改modal-header颜色或删除页眉、正文和页脚之间的“默认”行？谢谢。
控制器的示例：
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, ModalService) {
$scope.show = function() {
ModalService.showModal({
tem
浏览 5提问于2016-04-16得票数 6
回答已采纳
很好，
下面的代码似乎适用于较早版本的Angular，但在1.2版本中却不起作用。我不知道这是为什么。在角1.2中发生的情况是，$watch指令没有被击中。它不执行。它确实以角1.0.1执行。
知道为什么吗？
HTML
<fieldset validatedmarker>
<legend>User</legend>
<input type="text" name="name" class="form-control" ng-model="name" required>
浏览 3提问于2014-05-20得票数 0
回答已采纳
2回答
我正在尝试动态地向一组在指令中动态创建的li添加一个ng-click。我们的想法是隐藏select元素，并使用带有ul的自定义div覆盖它，并将其用作下拉菜单。通过这种方式，你可以随心所欲地设计它的样式。当您从ul列表中进行选择时，我使用该指令控制select。我在指令中动态创建了ul和li，并将它们添加到元素之前。我动态添加了ng-click属性。这一切都运行得很好，但是，ng-click从不触发。因此，我被迫通过jQuery使用单击事件(由于基金会的原因，它在页面上)。这是我的代码。`dataviz.directive("customDropdown"，["$tim
浏览 1提问于2014-08-02得票数 0
我对AngularJS相对来说是个新手。在尝试创建指令时，我可以了解这个问题：如何动态地添加/删除指令元素的子元素的属性，当这些子元素被动态地添加为“ng-重复”？时。
首先，我想到了这个解决方案：
模板
...
a.list-group-item(ng-repeat='playlist in playlists', ng-click='addToPlaylist(playlist, track)', ng-href='playlist/{{ playlist._id }})
...
*指令
link: function(scope, elm, attr
浏览 5提问于2016-02-13得票数 2
回答已采纳
5回答
以角度单击文本以显示div标记
、、、、
我想知道如何用角度来实现这一点，因为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
回答已采纳
我有一个Webapp，它可以在每次点击后更改一个按钮。每次单击都会通过访问来自不同服务器的内容来更改按钮。然而，它停止后，第一次点击。在这方面，我寻求你的建议和帮助。代码如下。
HTML:
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div id="divcont" ng-controller="OpenLink">
<button ng-click="openLi
浏览 3提问于2016-10-13得票数 0
我正在构建一个AngularJS应用程序，在该应用程序中，我希望根据调用的位置动态加载不同的html模板。我是AngularJS的新手，所以我很可能对这种方法太过份了。
html
<div ng-controller="ProjectsCtrl" ng-init="getProjects()">
<div ng-repeat="project in projects>
<button ng-click="">Create New Project</button>
浏览 3提问于2013-12-02得票数 1
我想在另一个指令模板中添加动态指令。如您所见，我想在指令模板中添加另一个指令，如何在其中添加这些动态指令
请帮帮忙
return {
restrict: 'AE',
require :'^awkGrid',
templateUrl: 'views/shutter.html',
link : function(scope, element, attr, controllerInstance){
//Set the header
scope.items = [];
angular.forEach(scope.rowData,
浏览 0提问于2015-09-27得票数 2
我定义了angularjs指令如下：
jtApp.directive("jtWizardPage", [function () {
return {
require: ["^ngController", "^jtWizard"],
restrict: "E",
replace: true,
transclude: true,
template: "<ng-form id='{{pageName}}' class=&
浏览 0提问于2014-05-17得票数 4
回答已采纳
3回答
我最近用AngularJs做了一个网站。我还处于学习阶段。我希望在页面上的元素到达顶部后将其修复。我尝试过各种Javascript和Jquery函数。然而，它们似乎不起作用。
我也尝试过使用Angular ui的ui-scrollfix，但同样不起作用。
我正在分享我的代码。这是一个不完整的页面。请告诉我达到上述效果的方法。
<div class="row pdiv">
<div class="col-md-8 pdiv col-md-offset-2">
<h3><b>About Us
浏览 0提问于2014-11-30得票数 21
回答已采纳
1回答
HTML：
<body ng-controller="TestController as _tc">
<h4>Controllers value:</h4>
<p>{{_tc.value}}</p>
<button ng-click="_tc.addInput()">Add Directive Value</button>
<test-directive></test-directive>
</body>
浏览 1提问于2015-10-23得票数 0
回答已采纳
我正在用Angular 5建立简单的博客，我有内部链接的问题。其中一个组件是PostComponent，它从后端获取post内容并显示出来。问题是帖子可以有内部链接，比如：
<a href="/posts/another-post">
这样的链接会导致整个页面重新加载，因为我使用的是Angular，所以我想避免这种情况。我曾尝试将锚点更改为类似的内容：
<a routerLink="/posts/another-post">
但它也不起作用，可能是因为html不是由Angular处理的，因为它只是绑定到段落的文本，比如：
<p [s
浏览 0提问于2018-02-28得票数 1
我将一些div添加到Angular controller中的HTML页面中。
jQuery("#mytag").after('<div ng-click="sayHi()">Hi</div>');
sayHi方法是controller内部的一种Angular方法。
$scope.sayHi = function () {
alert("hi");
};
但是这些动态创建的Div内部的ng-click不起作用！为什么？
浏览 0提问于2015-07-18得票数 1
回答已采纳
4回答
我有一个指令disable-ng-clicks，在某些条件下，我希望防止所有ng单击，这些都是指令的子级。下面是一些示例标记：
<div disable-ng-clicks> <!-- directive -->
<a ng-click="someAction()"></a>
<div ng-controller="myController">
<a ng-click="anotherAction()"></a>
<a ng-clic
浏览 0提问于2014-05-05得票数 0
回答已采纳
我希望将值从vm.foo复制到vm.bar (可以工作)，然后将焦点设置为vm.bar (不起作用)。
<input type="text" ng-model="vm.foo" id="foo" >
<button ng-click="vm.baa=vm.foo; angular.element('#bar').focus();"></button>
<input type="text" ng-model="vm.bar" id="
浏览 3提问于2017-07-30得票数 2
回答已采纳
我使用的是jQuery DataTable指令和工作正常的angularJS。我面临的问题是使用"ng-click“动态地向"TR”添加javascript函数，这是不起作用的。似乎动态添加的元素是不被角度识别的。
有人能帮我解决这个问题吗。
指令：
angular.module('ngdemo.directives', []).directive('myTable', function() {
return function(scope, element, attrs) {
// apply DataTable opt
浏览 2提问于2014-03-29得票数 4
回答已采纳
我在我的模板中使用了accordion指令，在accordion中我在一个元素上添加了attr ng-click。当我单击该元素时，它会触发两次。
小提琴：
代码：
//accordion directive
.directive('simpleAccordion', function($compile, $timeout) {
return {
restrict: 'AEC',
controller: function($scope) {
$scope.current = null;
浏览 15提问于2016-09-26得票数 1
回答已采纳
3回答
考虑到下面的示例，我很好奇为什么 scope:true会像预期的那样工作，以切换元素。但是，如果使用scope:{}，则ng-click不会调用切换方法。通过我自己的实验，如果您使用bindToController和控制器(不管是否使用)，问题都是一样的。
(function(angular) {
'use strict';
angular.module('test', [])
.directive('collapsibleMenu', [function() {
return {
scope: {}, //
浏览 2提问于2015-11-03得票数 2
回答已采纳
2回答
每当我删除一个包含指定ng-click属性的元素之前的dom元素时，它将不再调用ng单击引用的函数。
下面是一个不起作用的例子。注意:如果您将if(true)更改为if(false)并单击save，它将正确地调用函数。
function MainCtrl($scope) {
$scope.submit = function() {
alert('submitted');
}
function load() {
if(true){
$('#resetPassword').
浏览 7提问于2015-04-30得票数 2
回答已采纳
3回答
我想知道是否有一种方法可以将ng-click添加为属性？
假设我想添加ng-click，如果我的<li>有一个someClass类
angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'});
当<li>有一个类anotherClass时，我想要重置ng-click：
angular.element(root.querySelector('li.someClass').attr({'ng-cl
浏览 1提问于2015-08-05得票数 1
由于某些原因，在动态元素上使用此函数(‘testclickfn’)作为ng-click时，它不会调用该函数。下面是angularjs文件：
app.controller('testctrl',function($scope){
testfn($scope);
$scope.showelements = function(){
displayTestRows();
}
});
function testfn($scope){
$scope.testclickfn = function(){
alert('t
浏览 29提问于2018-08-21得票数 0
回答已采纳
2回答
为什么这个简单的ng-click示例不能工作呢？我在生产中使用angular已经有几个月了，但是这个柱塞让我很困惑。
如果您注意到，ng-show属性正在工作...为什么点击不是？它总是提醒默认的，而不是角度点击。
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show=
浏览 0提问于2014-12-18得票数 5
回答已采纳
我有两个指令，父指令应该简单地包装它的子指令。换位就是为了这个目的。然而，任何其他指令，如ng-click，绑定到子指令元素，因为它的属性不起作用(它没有编译吗？)。
下面是JS：
(function(angular) {
'use strict';
angular.module('docsIsoFnBindExample', [])
.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
$scop
浏览 40提问于2017-01-31得票数 0
我在工厂中有一个方法，它可以动态地将控件添加到菜单中。它需要动态创建，因为根据用户的不同，控件将是不同的。我已经阅读了StackOverflow上的文章，并看到了一些建议，比如创建单独的指令或在元素被追加后编译元素。我很难把头绕在这些解决方案上。
以下是功能：
factory.addCtrl = (name, icon) ->
ctrlCenter = angular.element("#control-container")
ctrl = angular.element("<div ng-click=\"togglePanel(&#
浏览 3提问于2015-03-10得票数 0
我试图从指令调用一个函数并传递一个参数。回调函数正被传递到隔离作用域。我有两个问题。首先，当嵌套在ng-repeat中时，这根本不起作用；第二，即使不在ng-repeat中，我也不知道如何将参数传递给回调函数。这是一个显示问题的柱塞：
请注意，当您单击"This works“时，它至少执行父作用域中的函数，但当单击其他作用域时，它什么也不做(因为它们在ng-repeat中)。这是第一个问题。
第二个问题是，当您单击"This works“时，即使它成功地调用了函数，我也不知道如何从指令作用域传递用户(请注意，它会发出未定义的警报)。
下面是一个示例指令(从我的实际应用程序中简化
浏览 3提问于2014-12-30得票数 4
4回答
当您单击复选框时，我希望触发一些jQuery代码。问题是，当我在加载页面时第一次单击选择框时，什么都不会发生。但是当我再次单击时，会执行jQuery-代码。我尝试将angular.element(就绪)设置为以下内容，但它不起作用：
angular.element(document).ready(function() {
$http.get($rootScope.appUrl + '/nao/test/test')
.success(function(data, status, headers, config) {
浏览 0提问于2014-07-17得票数 4
回答已采纳
我正在构建一个树视图，每个分支都是在一个指令中创建的。问题是事件ng-click不起作用。这是指令，事件位于var myBranch的末尾。它调用的函数位于指令"shapetree“元素所属的控制器内。无论如何，简单的警告在ng-click事件中是不起作用的。你能帮帮我吗？
app.directive("shapetree", function() {
return {
restrict: "A",
link: function($scope, elem, attrs) {
$scope.$watch(
functi
浏览 0提问于2015-08-02得票数 0
我有一个对象数组，并在插入动态html内容时映射它们(它可以正常工作和显示)：
this.arr.map(function(val) {
val.about = val.about.substring(0,150) + " <span ng-click='showMoreInfo()' class='show-more-info'>...more</span>";
});
我搜索了几个主题，并尝试这样做：
var element = angular.element(document.querySel
浏览 0提问于2016-12-13得票数 0
3回答
为了在成功登录后自动关闭ngDialog，我使用了以下方法。
HTML模板，
<a href="" ng-click="signin()">Log In</a>
<a href="" id="btnClose" ng-click="closeThisDialog()"
style="display:none;">Close</a>
在控制器中，signin方法具有以下代码来触发close按钮的click事件。
$timeout(function
浏览 6提问于2015-06-04得票数 3
我有一个控制器名为enableEditor的函数，如果我从直接HTML即(Add)调用该函数，它就能工作。但是，如果我调用通过指令(即编辑)创建的元素的函数，则不起作用。如果有什么想法，请看我的代码并给我建议。
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</titl
浏览 3提问于2014-05-27得票数 0
HTML有一个用于显示内容的Angular UI选项卡。每个内容都有一个包含ng-click指令的div，这是不起作用的。指令最有可能需要编译？如何做到这一点呢？
HTML
<uib-tabset>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
<div ng-bind-html="tab.content"></div>
</uib-tab
浏览 0提问于2017-04-03得票数 1
我从一些AngularJs实践开始，我想创建基于JSON文件的动态页面。
在加载页面时，我会得到以下错误：
Error: [$parse:syntax] http://errors.angularjs.org/1.4.2/$parse/syntax?p0=%7B&p1=invalid%20key&p2=23&p3=SelectedPage.SetPage(%7B%7Bpage.Number%7D%7D)&p4=%7Bpage.Number%7D%7D)
at Error (native)
at http://localhost/AngularJs/scrpts/
浏览 3提问于2015-09-29得票数 2
回答已采纳
我想访问一个动态生成的angular- to模型。
value of an input field using $scope.$watch. This is my code snippet below:
<body ng-app="myApp" ng-controller="myCtrl">
<form>
<input type="text" ng-model="<?php echo $product->id ?>" name="
浏览 1提问于2015-12-21得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
