详解angularJS动态生成的页面中ng-click无效解决办法

今天碰到了一个这样的需求，在自己写的动态的页面中，写入的AngularJS无效不能点击响应事件，以下给出代码以及解决方案

1.首先将我们要赋值给页面的数据new一下

var html = "<a href='javascript:void(0);' ng-click='test()'></a>"

2.用$compile函数编译一下上边的内容

var $html = $compile(html)($scope);

3.将编译好的内容插入到页面中

$("body").append($html);

完成

以下是完整版本

app.controller('customersCtrl', function ($scope, $http,$compile) {
$scope.test = function(){
  alert('test');
} 

// TODO 动态生成html中 ng-click无效 解决方法 $compile 是传进来的
//下边这句话就是要写入页面中的内容，首先把你写入的内容赋值给html
var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 

//用$compile进行编译 

var $html = $compile(html)($scope); 

//添加到页面中，或者你任何想添加的位置。}); 

$("body").append($html);

这样ng-click就可以触发function了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angularjs为ng-click事件传递参数

    Angularjs为ng-click事件传递参数

    在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

  • AngularJS基础 ng-click 指令示例代码

    AngularJS ng-click 指令 AngularJS 实例 按钮每次点击时,计数变量 count 自动加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l

  • angular ngClick阻止冒泡使用默认行为的方法

    本文实例讲述了angular ngClick阻止冒泡使用默认行为的方法.分享给大家供大家参考,具体如下: 这其实是一个很简单的问题,如果你认真查看过Angular官方的API文档,本来不想记录的.但是这个问题不止一次的被人问起,所以今天在记录在这里. 在Angular中已经对一些ng事件如ngClick,ngBlur,ngCopy,ngCut,ngDblclick...中加入了一个变量叫做$event. 如ngClick在官方文档是这么描述的: Expression to evaluate up

  • AngularJS基础 ng-dblclick 指令用法

    AngularJS ng-dblclick 指令 AngularJS 实例 在每次鼠标双击时,变量 count 加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l

  • angular ng-click防止重复提交实例

    方法一:点击后,让button的状态变为disable js指令: .directive('clickAndDisable', function() { return { scope: { clickAndDisable: '&' }, link: function(scope, iElement, iAttrs) { iElement.bind('click', function() { iElement.prop('disabled',true); scope.clickAndDisable

  • 详解angularJS动态生成的页面中ng-click无效解决办法

    今天碰到了一个这样的需求,在自己写的动态的页面中,写入的AngularJS无效不能点击响应事件,以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 var html = "<a href='javascript:void(0);' ng-click='test()'></a>" 2.用$compile函数编译一下上边的内容 var $html = $compile(html)($scope); 3.将编译好的内容插入到页面中 $("b

  • 详解cookie验证的php应用的一种SSO解决办法

    详解cookie验证的php应用的一种SSO解决办法 近日,项目中需要接入一个"年久失修"的PHP应用,由于系统已经建设多年,并且是信息中心自己的人通过某些工具弄出来的,而且是本人未真正接触过的PHP写的,而且跟我们的系统不在同一服务器上也就是存在跨域的问题,想通过客户端模拟登录的方式来实现,但是总是不成功. 没办法,只好想尽一切办法查看页面源代码,然后,找服务器的php文件,分析. 由于对php不熟悉,加上没有仔细看,因此,对于找到的登录页面的php文件,一开始只是有一个初步的了解,

  • Android CheckBox中设置padding无效解决办法

    Android CheckBox中设置padding无效解决办法

    Android CheckBox中设置padding无效解决办法 CheckBox使用本地图片资源 CheckBox是Android中用的比较多的一个控件,不过它自带的button样式比较丑,通常都会替换成本地的资源图片.使用本地资源图片很简单,设置android:button属性为一个自定义的包含selector的drawable文件即可. 例如android:button="@drawable/radio_style".radio_style.xml定义如下.checked和unc

  • 详解webpack自动生成html页面

    在项目中我们会不断的添加,优化代码,每次添加优化之后都需要打包进行再次上传更新.这时问题就回来了,每次打包出来js,css文件的名字都是一样的,在首页index.html的引用也不会变,这样老用户在访问这个页面时看到就会是浏览器缓存的版本,而不是最新的版本,想要看到最新版本还要进行清缓存,强制刷新,这显然是不可能的,那我们要如何解决这个问题呢? 首先有同学可能想到每次打包之后我改一下打包出来文件的名字,然后在首页index,html里面把引用代码里的文件名字也改掉就可以了,这种方法是可以的,但是

  • 详解vue-router 动态路由下子页面多页共活的解决方案

    我们都知道 vue-router 的动态路由匹配对组件是原地复用的策略,需要我们在组件中根据不同的 $route 参数展示不同的数据,这在大部分情景下是很高效的做法,但这无疑增加了组件的复杂度,而且不同参数间切换因为是同组件复用,切换效果不加修饰的话会显得很生硬,这里放一张图片感受一下. 如果我们希望能够每个动态参数都能渲染出一个组件而不是去复用怎么办呢? 我这里提供一个简便的方案 通常动态路由我们都是用来处理详情页 const router = new VueRouter({ routes:

  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

  • C#实现动态生成静态页面的类详解

    本文实例讲述了C#实现动态生成静态页面的类.分享给大家供大家参考,具体如下: 动态生成静态页面有许多好处,比如生成html网页有利于被搜索引擎收录.同时,由于减少了数据访问,减轻对数据库访问的压力,提高了网页打开速度. 基本思路: 使用一个字符串作为页面模板,再页面中包含用若干标志(用 {标志名} 表示),生成页面时,将标志替换为对应的值. 实现方法: 在初始化TextTemplate实例时读入模板,以标志为分割点将模板分割成几部分,生成页面时只需简单的将模板内容和标志的值连接起来.例如: 假如

  • 详解AngularJS中的表单验证(推荐)

    详解AngularJS中的表单验证(推荐)

    AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

  • 详解Linux动态库生成与使用指南

    Linux下动态库文件的文件名形如 libxxx.so,其中so是 Shared Object 的缩写,即可以共享的目标文件. 在链接动态库生成可执行文件时,并不会把动态库的代码复制到执行文件中,而是在执行文件中记录对动态库的引用. 程序执行时,再去加载动态库文件.如果动态库已经加载,则不必重复加载,从而能节省内存空间. Linux下生成和使用动态库的步骤如下: 编写源文件. 将一个或几个源文件编译链接,生成共享库. 通过 -L<path> -lxxx 的gcc选项链接生成的libxxx.so

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

随机推荐