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. python 数字和字符串转换问题

    一.python中字符串转换成数字 (1)import string tt='555' ts=string.atoi(tt) ts即为tt转换成的数字 转换为浮点数 string.atof(tt) ( ...

  2. 【重读】The C++ Programming Language/C++编程语言（一）

    最近在写C++系列的文章,翻出以前看过的 C++之父Bjarne Stroustrup的书.再一次,竟然又有新的领悟.现在看来,这不是一本只讲C++的书,对于程序设计/开发,以及如何学习开发知识都有所 ...

  3. 设置sudo权限

    由于CentOS安装之后,普通用户无sudo权限,故应该设置sudo权限. 此处假设当前用户为“cloudgis”. 1. 设置sudo权限,则设置如下: $ su root 输入root 密码 $ ...

  4. 使用Ambari部署hadoop集群

    准备工作 1. 设置sudo免密码登陆 由于CentOS安装之后,普通用户无sudo权限,故应该设置sudo权限. 参考文章:http://www.cnblogs.com/maybob/p/32988 ...

  5. Codeforces Educational Codeforces Round 15 C. Cellular Network

    C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  6. Mellanox OFED2.1-X安装记录

    ---恢复内容开始--- 1,tcl,tk,gcc-gfortran,libnl-devel依赖包

  7. 游戏模块分析总结（2）之UI、操作篇

    转自:http://www.gameres.com/309812.html 游戏模块分析总结(2)之UI.操作篇 发布者: wuye | 发布时间: 2014-12-12 15:03| 评论数: 0 ...

  8. RingBuffer源代码分析

    看到一篇写的非常详细的帖子,为防止楼主删帖后找不到,果断转载过来 RingBuffer源代码分析 出处:http://bbs.ickey.cn/community/forum.php?mod=view ...

  9. 简易的JQuery设置Cookie

    使用之前先引用这两个文件: 然后基本的功能代码如下: <div> <input id="txtDelValues" type="text" / ...

  10. 服务器之间建立oracle之间的关联语句

    create public database link DBLINK_WZGTAMS CONNECT TO WZGTAMS identified by WZGTAMS using ' (DESCRIP ...