[AngularJS] Using the Angular scope $destroy event and method
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的更多相关文章
- [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 ...
- angularjs指令中的scope
共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...
- 【js类库AngularJs】解决angular+springmvc的post提交问题
[js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...
- angular 中的$event 对象包含了浏览器原生的event对象
ou can pass the $event object as an argument when calling the function. The $event object contains t ...
- [AngularJS] Lazy loading Angular modules with ocLazyLoad
With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...
- [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 ...
- [AngularJS] New in Angular 1.5 ng-animate-swap
<!DOCTYPE html> <html ng-app="MyApplication"> <head> <link rel=" ...
- AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...
- AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...
随机推荐
- The remote SSH server rejected X11 forwarding request
两台相同的虚拟机,一台没有错误,一个经常出现警告,内容如下所示: The remote SSH server rejected X11 forwarding request 找了很多方法,最后发现是安 ...
- leetcode：Integer to Roman（整数转化为罗马数字）
Question: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the rang ...
- <转>Linux环境进程间通信（三）
原文链接:http://www.ibm.com/developerworks/cn/linux/l-ipc/part3/index.html 原文内容: 消息队列(也叫做报文队列)能够克服早期unix ...
- 对pymysql的简单封装
#coding=utf-8 #!/usr/bin/python import pymysql class MYSQL: """ 对pymysql的简单封装 "& ...
- Gradle 1.3之前的Publishing artifacts
在Gradle1.3之前,Publishing artifacts是使用uploadConfigurationName来publish 声明artifacts是靠使用 build.gradle art ...
- android 自定义用相机拍照后的照片存储位置
1.imageUri = Uri.fromFile(new File(Environment .getExternalStorageDirectory()+ File.separator + getP ...
- HDU 5821 Ball (排序)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5821 有n个盒子,每个盒子最多装一个球. 现在进行m次操作,每次操作可以将l到r之间盒子的球任意交换. ...
- 【转】删除已经存在的 TFS Workspace
删除已经存在的 TFS Workspace 分类: TFS2010-03-03 16:59 1239人阅读 评论(2) 收藏 举报 serverpathcommandcachefilegoogle 工 ...
- How Tomcat Works（十四）补充
在How Tomcat Works(十四)中,本人并没有对javax.servlet.Filter及javax.servlet.FilterChain做详细的描述,本文在这里做一下补充 FilterC ...
- effective c++ （一）
条款01:把C++看作一个语言联邦 C++是一种多重范型编程语言,一个同时支持过程(procedural),面向对象(object-oriented),函数形式(functional),泛型形式(ge ...