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. Java核心_内省

    Java核心_内省 查看java的api,发现有一个包java.bean咦,这个包是干什么的呢,原来,它是用来操作JavaBean对象的! 一.内省操作①JavaBean:一种特殊的Java类无参构造 ...

  2. HTML5_布局and音视频

    HTML5_布局and音视频 I.HTML5标签的改变1.文档声明HTML语法是不区分大小写的HTML5的DTD声明为:<!doctype html>确保浏览器能在HTML5的标准模式下进 ...

  3. 使用xshell使用删除出现乱码

    在使用xshell的时候出现如下错误: 1.打开如下属性设置: 2. 查看终端--键盘设置 4.修改为下图所示: 从而可解决删除乱码问题,在设置完成之后,关闭xshell,重新打开即可.

  4. github Top100

    nodejs 文件 var restify = require('restify'), moment = require('moment'), fs = require('fs'), yesterda ...

  5. CodeForces 711C Coloring Trees (DP)

    题意:给定n棵树,其中有一些已经涂了颜色,然后让你把没有涂色的树涂色使得所有的树能够恰好分成k组,让你求最少的花费是多少. 析:这是一个DP题,dp[i][j][k]表示第 i 棵树涂第 j 种颜色恰 ...

  6. initialSize,maxTotal,maxIdle,minIdle,maxWaitMillis

    初始化连接数:默认值 0 同一时刻可分配最大连接数:默认值 8 ,设置为负数时不做限制 最大空闲连接,默认值 8 ,超出连接将被释放 最小空闲连接数,默认值 0 请求连接最大等待时间(毫秒),默认值 ...

  7. IOS深入学习（19）之View object

    1 前言 本章主要介绍了View视图对象,包括了其属性,视图间关系和CALayer的简介. 英文原文:http://blog.csdn.net/developer_zhang/article/deta ...

  8. C# 特性详解(上)

    特性(attribute)是被指定给某一声明的一则附加的声明性信息. 元数据,就是C#中封装的一些类,无法修改.类成员的特性被称为元数据中的注释.     1.什么是特性 1)属性与特性的区别  属性 ...

  9. 事件委托&jQuery on

    例如: <h2>Great Web resources</h2> <ul id="resources"> <li><a hre ...

  10. OSGI（面向Java的动态模型系统）

    基本简介编辑 OSGI服务平台提供在多种网络设备上无需重启的动态改变构造的功能.为了最小化耦合度和促使这些耦合度可管理,OSGi技术提供一种面向服务的架构,它能使这些组件动态地发现对方.OSGi联 O ...