本文实例讲述了AngularJS中$injector、$rootScope和$scope的概念和关联关系。分享给大家供大家参考，具体如下： $injector、$rootScope和$scope是AngularJS框架中比较重要的东西，理清它们之间的关系，对我们后续学习和理解angularJS框架都非常有用。 1、$injector其实是一个IOC容器，包含了很多服务(类似于spring框架中的bean)，其它代码能够通过 $injector.get("serviceName")的方式，从injector中获取所需要的服务。详情参...
本文实例讲述了AngularJS全局scope与Isolate scope通信用法。分享给大家供大家参考，具体如下： 在项目开发时，全局scope 和 directive本地scope使用范围不够清晰，全局scope与directive本地scope通信掌握的不够透彻，这里对全局scope 和 directive本地scope的使用做一个总结。 一、scope作用域 1、AngularJS中，子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外：在directive中使用scope: { ...
本文实例讲述了AngularJS中isolate scope的用法。分享给大家供大家参考，具体如下： angular js中指令directive有个特别有用的东西，那就是 isolate scope （被隔离的scope） 关于具体他和全局的scope 有什么区别，可以参考下面这篇文章： AngularJS 全局scope与Isolate scope通信用法示例 本文主要讲解 其具体的几种使用方式： 1. = 的使用 [html] <div class="card" ng-repeat="app in apps"><app-info info="app"></app-info> <...
本文实例讲述了AngularJS的scope，继承结构，事件系统和生命周期。分享给大家供大家参考，具体如下： 深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例。类 Scope 拥有可以控制 scope 生命周期的方法，提供事件传播的能力，并支持模板渲染。 作用域的层次结构 让我们再来看看这个简单的 HelloCtrl 的例子： var HelloCtrl = function($scope){$scope.name = World; }HelloCtrl 看起来就跟普通的 JavaScript 构造函数没...
AngularJS使用directive()方法类定义一个指令： .directive("name",function(){return{}; })上面是定义一个指令的主体框架，该方法接受两个参数： 1、第一个参数：name表示定义的指令的名称（angularjs会用这个name注册这个指令） 2、第二个参数：函数，该番薯必须返回一个对象或者一个函数，但通常我们会返回一个对象。return后接的就是返回的对象。 在返回的对象中有一个scope属性，这个属性用来修饰指令的作用域。 每次在注册一...
一、什么是Scope？scope（http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope）是一个指向应用model的object。它也是expression（http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html）的执行上下文。scope被放置于一个类似应用的DOM结构的层次结构中。scope可以监测（watch,$watch）expression和传播事件。 二、scope的特性 scope提供$watch API（http://code.angularjs.org/1.0.2/docs/api/ng.$rootScop...
简介 在ng的生态中scope处于一个核心的地位，ng对外宣称的双向绑定的底层其实就是scope实现的，本章主要对scope的watch机制、继承性以及事件的实现作下分析。 监听 1. $watch 1.1 使用 // $watch: function(watchExp, listener, objectEquality) var unwatch = $scope.$watch('aa', function () {}, isEqual);使用过angular的会经常这上面这样的代码，俗称“手动”添加监听，其他的一些都是通过插值或者directive自动地添加监听，但...
AngularJS Scope(作用域)Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上。如何使用 Scope当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:AngularJS 实例控制器中的属性对应了视图上的属性： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6...
Controller的创建AngularJs controller使用无处不在，在里代码演示比较简单的创建工作。 <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-"/> <title>App</title> <script src="angular.js"></script> <link href="bootstrap-theme.css" rel="stylesheet" /> <link href="bootstrap.css" rel="stylesheet" /> <script> angu...
$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中.$scope是一个把view（一个DOM元素）连结到controller上的对象。在我们的MVC结构...
在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve，其表格的表现方式是这样的：<table-helper datasource="customers" clumnmap="[{name: Name}, {street: Street}, {age: Age}, {url: URL, hidden: true}]"></table-helper>以上，变量colmnmap的值是事先定义在了Scope中的：return { restrict: E, scope: { columnmap: =, datasource: = }, link:link, template:template }; AngularJS中，还有一...
在AngularJS中，有时候需要监视Scope中的某个变量，因为变量的改变会影响一些界面元素的显示。有时，也希望通过jQuery调用Scope的某个方法。 比如以下场景：<div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input type="checkbox" ng-model="jQBtnState"/> Toggle jQ button state <p>Counter: {{counter}}</p> </div> 以上，我们希望： ● Scope中的jQBtnState变量值如果为fal...
一、遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候。因为每个 Controller 都有它对应的 Scope（相当于作用域、控制范围），所以 Controller 的嵌套，也就意味着 Scope 的嵌套。这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢？从子 Scope 怎样更新父 Scope 里的 Model 呢？ 这个问题很典型，比方说当前页面是一个产品列表，那么就需要定义一个 ProductListController function ProductListController($sc...
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://localhost:81/js/angular.min.js"> </script> <body ng-app="app" ng-controller="c"> <div dir ng-repeat="item in items" ng-model="m"> {{item}} + {{m}} <br> </div> </body> <script> var app = angular.module("app", [...
Scope是AngularJS里的一个很重要的概念，简单的说它就是用来保存AngularJS Model们的对象，是Model们温暖的小家～ 那这个小家是什么时候造的呢？ 1 html ng-app = mainApp 2 / html 我们知道， ng-app 是一个应用启动AngularJS的入口点，在这里也会创建一个r Scope是AngularJS里的一个很重要的概念，简单的说它就是用来保存AngularJS Model们的对象，是Model们温暖的小家～那这个小家是什么时候造的呢？1 <html ng-app="mainApp"> ...