With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. This is used for cleanup, and gives you a final opportunity to access any data on a scope. Scopes also have a (rarely used) $destroy method that allows you to manually destroy a scope.

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.js"></script>

  <script src="app.js"></script>

</head>

<body ng-app="demo" ng-init="isToggled = true">

<div ng-if="isToggled">

  <div ng-controller="MyCtrl as my">

    Simple Form

    <input type="text" ng-model="my.person.firstName"/>

    <input type="text" ng-model="my.person.lastName"/>

    Welcome, {{ my.person.firstName }} {{ my.person.lastName }}

    <button ng-click="my.click()">Toggle</button>

  </div>

  <my-directive></my-directive>

</div>

<hr/>

</body>

</html>
angular.module("demo", [])

    .factory("person", function () {

        return {

            firstName: "John",

            lastName: "Lindquist"

        }

    })

    .controller("MyCtrl", function ($scope, person) {

        var my = this;

        my.person = person;

        my.click = function () {

            $scope.$destroy();

        }

    })

    .directive("myDirective", function () {

        return {

            restrict: "E",

            scope: {},

            template: "<div style='border: 1px solid black'>My Directive</div>",

            link: function (scope) {

                scope.$on("$destroy", function () {

                    console.log("directive destroy");

                })

            }

        }

    })

When you toggle ng-if, actually it triggle $scope.$destory.

Once $destory() is triggered, scope is destoried, no event and binding to the scope any more.

[AngularJS] Using the Angular scope $destroy event and method的更多相关文章

  1. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  2. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  3. 【js类库AngularJs】解决angular+springmvc的post提交问题

    [js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...

  4. angular 中的$event 对象包含了浏览器原生的event对象

    ou can pass the $event object as an argument when calling the function. The $event object contains t ...

  5. [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...

  6. [AngularJS] New in Angular 1.3 - Performance Boost with debugInfoEnabled

    By default, Angular provides a lot of debug information on the DOM that's only necessary for tools l ...

  7. [AngularJS] New in Angular 1.5 ng-animate-swap

    <!DOCTYPE html> <html ng-app="MyApplication"> <head> <link rel=" ...

  8. AngularJS进阶(五)Angular实现下拉菜单多选

    Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...

  9. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

随机推荐

  1. cocos2d-js取不到cocostudio里面控件问题

    var winSize = cc.director.getWinSize(); //add main node var mainNode = cc.Node.create(); ; mainNode. ...

  2. cocos中添加显示文字的三种方式（CCLabelTTF 、CCLabelBMFont 和CCLabelAtlas）

    CCLabelTTF CCLabelTTF 每次调用 setString (即改变文字)的时候,一个新的OPENGL 纹理将会被创建..这意味着setString 和创建一个新的标签一样慢. 这个类使 ...

  3. reds pub/sub官方文档翻译

    Publish / Subscribe发布/订阅 redis-py includes a PubSub object that subscribes to channels and listens f ...

  4. 【多线程】Java并发编程：Lock（转载）

    原文链接:http://www.cnblogs.com/dolphin0520/p/3923167.html Java并发编程:Lock 在上一篇文章中我们讲到了如何使用关键字synchronized ...

  5. rdlc Report Viewer Configuration Error

    主要是web.config没有配置 方法参考http://msdn.microsoft.com/zh-cn/library/ms251661.aspx

  6. [原创]Devexpress XtraReports 系列 4 创建多栏报表

    昨天我们完成了 [原创]Devexpress XtraReports 系列 3 创建主从报表 今天我们继续学习新的一种报表模式:多栏报表.(Demo源码,数据库最后附上) 或许很多人会问什么是多栏报表 ...

  7. mysql编码详解

    在开发程序的时候,我们使用mysql数据库开发的时候,有时会碰到自己明明输入的是中文,为什么数据库中存储的就是???? 1.在配置Connection URL时,加上?useUnicode=true& ...

  8. 要后台控制前台的的CSS样式，我们可以加入ASP.NET Literal 控件

    ASP.NET Literal 控件,用于在页面上显示文本.此文本是可编程的. 我用它来制作了 ) { this.LtdMemberPromotion7.Text = "<style ...

  9. UVaLive 6809 Spokes Wheel (模拟)

    题意:给定两个16进制数,问你把它转成二进制后,把第一个向左或者向右旋转最少的次数同,使得第一个变成第二个. 析:也是比较水的,按照要求做就好,注意0的情况,可能会忘记. #pragma commen ...

  10. LOTUS 迁移到Exchange 2010 POC 之在Exchange 2007 安装Lotus Admin!

    双击Setup安装: