angular-day7-controller-scope-databind

发表于 | 分类于 ，

ng progress

  1. angular.js included and executed
  2. angular module get created
  3. find templates-dom:
    • ng-* attributes (directives)
    • evaluating expression
    • data-binding markup
  4. process templates
    • compile & link
    • transform templates
  5. renders to view

angular-process

controller

  • controller is js object which contain application logic.
    • defined as part of angular module
  • send/receive data between dom and application logic.
  • usually attached to a dom element using ng-controller attribute (instantiated)

scope is a context.

When controller instantiate scope is created to glue module and template dom.

inspect ng-ctrl tag and type angular.element($0).scope()在控制台查看$scope内容

1
2
3
4
Object.keys(angular.element($0).scope())
["$$childTail", "$$childHead", "$$nextSibling", "$$watchers", "$$listeners", "$$listenerCount", "$$watchersCount", "$id", "$$ChildScope", "$parent", "$$prevSibling", "tom", "pai"]
console.log(this=== $scope.tom); //true controller实例是$scope一个属性?

修改模型的数据

1
2
angular.element($0).scope().name = 'Nick'
angular.element($0).scope().$digest()

scope nest

  • inner scope shadow the outer same name member.
  • inner scope .proto == outer scope

最外层的$rootScope(run只会在模型创建时执行)

1
2
3
4
5
6
7
var app1 = angular.module('app1', [])
		.run(['$rootScope',function ($rootScope) {
			$rootScope.haha = 'dyjamgo';
		}])
		.run(['$rootScope',function ($rootScope) {
			// do other thing
		}]);

data binding

3种绑定方式

  • one way ng-bind
  • two way ng-model
  • three way \{\{::scopemember}}