`
仁生之狼
  • 浏览: 42901 次
  • 性别: 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 part1

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

    angular-promise-state:绑定到 AngularJS 承诺状态的简单承诺装饰

    例如,一些变量会通知 UI 是否需要在加载数据时显示加载微调器,或者在数据到达后显示组件。 指令控制器中的某处 // all promises returned from $http have a 'bindPending' method // ($http(), $http.get(), $...

    angular-dynamic-loader:AngularJS的动态加载资源

    AngularJS的动态加载资源 js / directives / loadctrl.directive.js是一条指令,它使用给定的控制器名称查找控制器路径,创建并注入html脚本标签以加载资源,并即时将其自身转换为ng-controller。

    浅谈AngularJs 双向绑定原理(数据绑定机制)

    那么什么是双向绑定,下面简单进行讲解。 首先我们要理解数据绑定。我们看到的网站页面中,是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言,便是html和css主要做的工作。而将数据显示在页面上,并且...

    RequireJS-Dojo-AngularJS:只需使用 requireJS 加载 dojo 和 angularjs 示例

    RequireJS-Dojo-AngularJSJust use requireJS to load dojo and angularjs example目的主要是想实践一下,如何通过requireJS管理angularjs和其他库,另外,为了充分利用angularjs的优势(MVC,数据双向绑定,指令系统)...

    在React框架中实现一些AngularJS中ng指令的例子

    首先设定一段Angularjs代码的ng-class: &lt;i class=header-help-icon ng-class={up:showMenu}&gt;&lt;/i&gt;   比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢? 首先在state设置一个变量...

    AngularJS使用ng-options指令实现下拉框

    ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值; 另一个是ng-options用于确定下拉列表的元素数组。 1、问题背景 一般情况下,select下都会有option,但是AngularJS中有指令ng-...

    LiveCSS:AngularJS 模块,允许您在 CSS 语法中使用所有标准的 AngularJS 绑定、指令和模板机制

    关于LiveCSS 是一个 AngularJS 模块,它允许您在 CSS 文件中使用所有的 Angular 魔法,以及一些额外的东西。 如果你曾经想能够写出这样的东西: margin : 10 px ; width : ((window.width / 2 ) - 20 )px; ...在您的...

    resume-website:AngularJS内容管理系统

    AngularJS内容管理系统带有自定义... 编译站点加载和指令时,它们将调用内容服务并检索JSON,并将响应设置为数据模型。 内容以类似方式在CMS中维护。 表单输入与发送到PHP服务的模型绑定,该服务更新数据库中的内容。

    AngularJS控制器controller给模型数据赋初始值的方法

    之前的文章《AngularJS入门示例之Hello World详解》,很简单的就实现了模型数据和页面显示的自动绑定。现在我们使用控制器,给模型赋初始值。如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target...

    AngularJS 模块化详解及实例代码

    AngularJS有几大特性,比如:  1 MVC  2 模块化  3 指令系统  4 双向数据绑定 那么本篇就来看看AngularJS的模块化。  首先先说一下为什么要实现模块化:  1 增加了模块的可重用性  2 通过定义模块,实现加载...

    angularjs_patterns:各种angularjs编码模式

    angularjs_patterns 各种angularjs编码模式 火力基地 一个如何使用angularfire访问firebase数据库的示例,它演示了:获取所有记录-$ firebasearray服务添加... 指令数据绑定-感谢了有关指令框架内作用域的精彩文章!

    angularjs-zh

    ##第1章 AngularJS简介 概念 客户端模板 模型, 视图, 控制器(MVC) 数据绑定 依赖注入 指令 示例: 购物车 小结 ##第2章 AngularJS应用程序剖析 引用Angular 加载脚本 使用ng-app声明Angular界限 模型, 视图, 控制器 ...

    Angular:角度测试

    ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。ng-app 通过一个值(比如 ng-app="myModule")连接到代码模块。###ng-init 指令ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下,不...

    angular-unsavedChanges:angular-unsavedChanges

    用于表单的AngularJS指令,用于警告用户未...通过侦听$locationChangeStart和$stateChangeStart与uiRouter一起使用可以配置为监听任何事件怎么运行的该指令绑定到locationChangeStart和[removed] 。 这些事件发生时,将

    AngularJS语法详解

    angular被加载到页面中,等待页面加载完成,查找ng-app指令,用来定义模板的边界 angular遍历模板,查找指定和绑定关系,将触发一些列动作:注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后,应用将会...

    angularjs中ng-bind-html的用法总结

    此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行...

    drupal_angular_example:用于节点 CRUD 操作和用户身份验证的示例 AngularJS 接口

    无头 Drupal - Angular JS 示例 这是 AngularJS 如何成为 Drupal 站点的 Web 客户端的... 起点是index.html ,我们在其中加载所有脚本并设置指令,以便 Angular 知道它正在处理它: &lt; body ng-app =" drupalAngula

    etsy_api_test:测试设置以从Etsy API提取信息

    该项目正在努力使用双向AngularJS数据绑定在基于列的动态箱形布局中实现Etsy API。 以前尝试的布局样式: 石工 Masonry是一个用于jQuery的级联网格布局库。 AngularJS要求将所有jQuery库包装在angular指令中。 ...

    Angualr-ZAK-club:Angular JS示例应用程序(Zak's Club)

    AngularJS指令: ng-app:加载包含Angular JS Application的网页时初始化应用程序。 ng-init:将值存储到应用程序中使用的变量中。 ng-model:定义要在应用程序中使用的模型/变量。 ng-repeat:在集合中重复HTML元素...

Global site tag (gtag.js) - Google Analytics