`
仁生之狼
  • 浏览: 44823 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

动态加载指令时如何绑定事件(angularjs1)

 
阅读更多

       在directive的link中有一个$http请求,当请求完成后根据返回的值动态做element.append('......');这个操作,能显示没问题,如果动态组的HTML里面有ng-click等事件时,会发现显示出来的内容根本不执行ng-click绑定的方法!

       这个是因为异步返回之后,指令的编译已经完成,因此需要动态编译。

       使用$compile服务! 在link方法中对返回后的html代码经过$compile服务处理后再插入:
       var el=$compile("HTML代码")(scope); element.append(el);

      

var TestCtrl = function($scope, $element,$compile){
    $scope.a = '123';
    $scope.set = function(){
      var tpl = $compile('<p>hello {{ a }}</p>');
      var e = tpl($scope);
      $element.append(e);
    }
  }

 

分享到:
评论

相关推荐

    Angularjs标签模板加载原理

    当模板通过URL加载时,AngularJS会尝试从$templateCache中查找该模板。如果找到,就直接使用;如果没有找到,就会发起HTTP请求去获取模板内容,然后将其添加到$templateCache中,供后续使用。 在自定义指令中,我们...

    AngularJS1.X学习笔记2-数据绑定详解

    AngularJS1.X是AngularJS的一个主要版本,它引入了数据绑定、依赖注入、MVC模式、指令等概念,使得前端开发更加模块化和高效。 数据绑定是AngularJS的核心特性之一,它允许开发者通过声明式的方式将模型(model)和...

    Angularjs 动态添加表单

    动态添加表单是AngularJS中一个重要的特性,它允许开发者在用户交互时动态地向页面中添加或移除表单字段,增强了用户的交互体验。 在传统的HTML表单中,我们通常会预先定义好所有的表单元素,但在某些情况下,比如...

    AngularJS 0003: 指令

    这两个属性可以用来动态生成或加载指令的视图内容。 **4. 指令作用域** `scope`属性用于定义指令的作用域。可以是`true`、`false`或一个对象。`true`表示创建一个新的孤立作用域,`false`表示继承父作用域,对象...

    动态web应用程序开发框架AngularJS的特性分析.pdf

    AngularJS通过模板和ng-bind指令来实现双向数据绑定。当数据发生变化时,AngularJS会自动更新页面数据,反之亦然。 另外,AngularJS还具有依赖注入的特性。依赖注入是指在程序中将组件之间的依赖关系解耦的技术。...

    AngularJS+RequireJs实现动态加载JS和页面的方案研究.pdf

    此外,`&lt;button id="test"&gt;`示例展示了如何通过JavaScript内容动态显示页面元素,这可能涉及到AngularJS的数据绑定和DOM操作,或者是通过RequireJS加载额外的模块来处理特定的交互逻辑。 总的来说,结合AngularJS和...

    angularJS理论与实战.ppt

    1. 基础模板:创建一个简单的AngularJS应用,包括初始化应用、创建控制器和数据绑定。 2. 表单处理:利用ng-model处理表单数据,ng-submit实现表单提交,配合表单验证提高用户体验。 3. HTTP交互:使用$http服务进行...

    angularjs1.X前端项目完美框架

    AngularJS 1.x 是一个流行的JavaScript框架,由Google维护,用于构建动态Web应用。它利用数据绑定和依赖注入,简化了客户端开发流程,使得开发者可以更高效地创建复杂的单页应用(SPA)。本项目基于AngularJS 1.x,...

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    ng-view和ng-include指令用于在单页应用中动态地加载和渲染视图,它们也会创建新的子作用域。ng-view是SPA中用于定义路由的主要指令,它在视图切换时保持应用状态。ng-include则用于包含和渲染外部HTML片段。 总的...

    AngularJS入门教程之数据绑定原理详解

    对于初学者来说,理解和掌握AngularJS的数据绑定机制是构建动态和响应式Web应用的基础。而对于经验丰富的开发者而言,深入研究数据绑定的细节并将其应用到实际项目中,可以大幅提高开发效率和应用性能。

    angularjs分页实例

    2. **指令交互**:通过双向数据绑定,当用户操作分页元素时,指令会更新控制器中的分页状态,触发数据的重新加载。 **三、分页配置** 1. **分页参数**:在控制器中设置初始的分页参数,如每页显示记录数(`...

    AngularJS 1.2.19&1.3.0

    1. 双向数据绑定:AngularJS通过双向数据绑定连接了视图和模型,当模型改变时,视图会自动更新,反之亦然。这大大减少了开发者手动同步视图和模型的工作。 2. 指令系统:AngularJS的指令系统允许开发者创建自定义的...

    angularJS的页面加载切换效果

    AngularJS是一个流行的前端JavaScript框架,它提供了强大的数据绑定和模块化功能,使得开发动态Web应用变得简单。当我们谈论“页面加载切换效果”,我们通常指的是在用户导航到新路由时,页面之间过渡的视觉反馈。 ...

    精通AngularJS part1

    他也对Angular UI (AngularJS的配套框架)有所贡献,并为AngularJS 提供了Twitter Bootstrap 相关的指令(directives)。不写代码时,Pawel 常在会议与活动上为AngularJS布道。 Peter Bacon Darwin已经积累了20年...

    angularJS与bootstrap结合实现动态加载弹出提示内容

    在本例中,通过AngularJS实现动态加载弹出提示内容,主要利用了数据绑定和指令这两个核心特性。AngularJS中的指令是扩展HTML标签的语法,可以创建自定义元素和属性,并且可以附加新的行为。结合AngularJS的依赖注入...

    angularjs 小猫杯全套 代码

    7. **路由**:AngularJS的`$routeProvider`或`$stateProvider`(在AngularJS 1.x和AngularJS 2+版本中分别使用)允许设置页面间的导航规则,实现基于URL的动态内容加载。 8. **单元测试**:AngularJS提供了`ngMock`...

    angularbaidumaps百度地图AngularJs指令示例

    你可以通过`on-*`属性绑定AngularJS的函数来响应百度地图的事件,如点击、拖动等: ```html ()" on-centerchanged="centerChanged()"&gt; ``` 在控制器中实现这些事件处理函数: ```javascript app.controller('...

    关于 angularJS的一些用法

    1. 事件绑定:在AngularJS中,ng-click是用于绑定点击事件的指令,类似于原生JavaScript中的onclick事件。当用户点击一个DOM元素时,会触发指定的方法。如果需要在事件处理函数中获取事件对象,需要在函数参数中加入...

    AngularJS+理论与实践+PPT+和演示

    2. **编译和链接阶段**:当页面加载时,AngularJS的编译器会遍历DOM,寻找指令(directives)并执行它们。编译过程创建了一个作用域对象,然后链接阶段将编译好的元素和作用域关联起来,形成可以响应用户事件的活动...

    AngularJS 自定义指令 - ECharts 2 柱状图

    在本文中,我们将深入探讨如何在 AngularJS 中创建自定义指令来封装 ECharts 2 的柱状图。ECharts 是一个基于 JavaScript 的数据可视化库,它提供了丰富的图表类型,包括柱状图、折线图、饼图等。AngularJS 是一个...

Global site tag (gtag.js) - Google Analytics