您的位置:首页 > 运维架构

动态添加的dom方法,调用angular中$scope方法

2016-09-07 18:13 295 查看
由于jquery的操作简单,大部分人对其比较熟悉,因此,很容易实现动态的添加代码。

然而,动态添加的HTML代码,是没有被angular“编译”处理的,因此,动态添加的代码中的事件不一定被angular认识,那么,我们怎么操作能让$scope认识其定义的方法呢

 

代码如下: 

<div class="testAddHtml">
<div id="mmmmm"></div>
<button onclick="angular.element(this).scope().liumei(event)">jquery add html</button>
</div>

  

/**
* 创建了一个indexController
* */
angular.module('huangbiaoApp')
.controller('indexController', ["$scope", "$http", "ApiService","$state","$q",function($scope, $http, ApiService,$state,$q) {
$scope.myname = "liumei";
$scope.liumei = function(myevent){
var timeStamp = new Date().getTime();
//使用jquery将代码动态的添加到DOM中,当触发onclick事件的时候,实际上是被注入到$scope对象中
$("#mmmmm").after('<button onclick="angular.element(this).scope().liumei(event)">jquery'+timeStamp+'</button>');
//调用$scope的对象值
alert(this.myname);
}
}]);

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: