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. 【LeetCode】12 & 13 - Integer to Roman & Roman to Integer

    12 - Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be wit ...

  2. visual assistent 过期

    VA功能超级好使,下载的一般都有时间限制,但又不想买正版. 我的是32位系统 vs2008: 将VA_X.dll文件拷到 (x86)C:\Program Files\Visual Assist X\ ...

  3. kali 更新源

    个人收集的kali 更新源: 修改更新源: vim /etc/apt/sources.list 更新源列表包: #apt-get update 更新系统软件: #apt-get upgrade #官方 ...

  4. oracle 体系结构解析

    三.oracle 体系结构 1.oracle内存由SGA+PGA所构成 2.oracle数据库体系结构数据库的体系结构是指数据库的组成.工作过程与原理,以及数据在数据库中的组织与管理机制. oracl ...

  5. 深入理解HBase Memstore

    2013/08/09 转发自http://www.cnblogs.com/shitouer/archive/2013/02/05/configuring-hbase-memstore-what-you ...

  6. easyui datagrid 部分参数整理

    数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节 ...

  7. LightOJ 1112 Curious Robin Hood （单点更新+区间求和）

    http://lightoj.com/volume_showproblem.php?problem=1112 题目大意: 1 i        将第i个数值输出,并将第i个值清0 2 i v     ...

  8. 【转载】Windows/Office“神key的来源”(附win8神key)

        凡是没有经过微软授权的渠道激活Windows/Office的全部是"D版"!但由于密钥激活更方便快捷,因此很受欢迎.从百度博客到现在,很多网友询问:"神key&q ...

  9. mysql show processlist 命令详解

    命令格式 SHOW [FULL] PROCESSLIST SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此信息.如果您有SUPE ...

  10. HTML5简介及HTML5的发展前景

    WEB技术发展越来越迅速,HTML5的到来更是把WEB技术推向了巅峰,目前HTML5技术已经日趋成熟,不仅在PC段,HTML5更是在移动终端上也有广泛的应用,HTML5的未来十分光明,值得我们去学习. ...