scope: { ... }
を使用するディレクティブ
scope: { ... }
、これはプロトタイプ的に継承されない「分離」スコープを作成します。 この設計は、再利用可能なコンポーネントのディレクティブを作成するときによく使用されます。
通常、ドメインの継承は直接的なものであり、多くの場合、どのように行われるかを知る必要さえありません... プリミティブ （例：数値、文字列、論理型） への 双方向のデータバインディング （つまり、フォーム要素、ngモデル） ）子から親スコープで定義されます。 ほとんどの人が期待するようには機能しません。 子孫が独自のスコープを作成し、同じ名前の親プロパティと重複することがあります。 これはAngularの機能ではないため、プロトタイプの継承はJavascriptで機能します。 Angularを使用する新しい開発者は、ng-repeat、ng-switch、ng-view、ng-includeが新しい子領域を作成することに気付かないことが多いため、これらのディレクティブを使用すると問題が発生します。
この問題は、「 ベストプラクティス 」に従うことで簡単に回避できます。これは、ng-modelの式に常にピリオドを含める必要があることを示しています。
モデル内のドット「。」により、プロトタイプの継承が正常に機能することが保証されます。 だから
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , , anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller, scope: true
, transclude: true
. , : scope: { ... }
. «» .
, , , .. scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. ., num
, ng-model) . , ng-repeat , num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. ., num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
( scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . , parentProp
: {scope: localProp: '@parentProp' }
. : scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, : scope.someIsolateProp = "I'm isolated"
: attrs.$observe('attr_name', function(value) { ... }
, «@». , — attrs.$observe('interpolated', function(value) { ... }
— value
11. ( scope.interpolatedProp
. , scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, : transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller, scope: true
— ng-repeat. ng-repeat , . — scope: {...}
. , «=», «@», «&» . — transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
.
/ , :
1. $parent.parentScopeProperty
. .
2. , , ( )
, , .
parentScope aString, aNumber, anArray, anObject, aFunction. childScope parentScope, :
( , ,anArray
, .)
, parentScope, , , , , . ( parentScope, ... ). , :
childScope.aString === 'parent string' childScope.anArray[1] === 20 childScope.anObject.property1 === 'parent prop1' childScope.aFunction() === 'parent output'
, :
childScope.aString = 'child string'
, aString childScope. parentScope . , ng-repeat ng-include .
, :
childScope.anArray[1] = '22' childScope.anObject.property1 = 'child prop1'
, (anArray anObject) childScope. parentScope, . childScope; . (, .)
, :
childScope.anArray = [100, 555] childScope.anObject = { name: 'Mark', country: 'USA' }
, , parentScope .
:
childScope.propertyX childScope propertyX, . childScope.propertyX, .
:
delete childScope.anArray childScope.anArray[1] === 22 // true
childScope, , , .
:
, : ng-repeat, ng-include, ng-switch, ng-view, ng-controller,scope: true
,transclude: true
. , :scope: { ... }
. «» .
, , , ..scope: false
.
ng-include
, :
$scope.myPrimitive = 50; $scope.myObject = {aNumber: 11};
HTML:
<script type="text/ng-template" id="/tpl1.html"> <input ng-model="myPrimitive"> </script> <div ng-include src="'/tpl1.html'"></div> <script type="text/ng-template" id="/tpl2.html"> <input ng-model="myObject.aNumber"> </script> <div ng-include src="'/tpl2.html'"></div>
ng-include , .
(, «77») , myPrimitive , .
, , .
(, «99») . tpl2.html , , ngModel MyObject — .
: , «99» 11, 50.
$parent, :
<input ng-model="$parent.myPrimitive">
(, «22») . ( $parent ,
).
( ), Angular - (. . ), $parent, $$childHead $$childTail . .
, , . , , . ,
// $scope.setMyPrimitive = function(value) { $scope.myPrimitive = value; }
, « ». ( Stack Overflow .)
. stackoverflow.com/a/13782671/215945 github.com/angular/angular.js/issues/1267 .
ng-switch
ng-switch ng-include. , $parent , . .
. AngularJS, bind scope of a switch-case?
ng-repeat
ng-repeat -. , :
$scope.myArrayOfPrimitives = [ 11, 22 ]; $scope.myArrayOfObjects = [{num: 101}, {num: 202}]
HTML:
<ul> <li ng-repeat="num in myArrayOfPrimitives"> <input ng-model="num"> </li> <ul> <ul> <li ng-repeat="obj in myArrayOfObjects"> <input ng-model="obj.num"> </li> <ul>
/, ng-repeat , , . ( .) ng-repeat:
childScope = scope.$new(); // ... childScope[valueIdent] = value; // childScope
( myArrayOfPrimitives), , . (. .,num
, ng-model) . , ng-repeat ,num
, myArrayOfPrimitives:
ng-repeat ( ). Angular 1.0.2 , , , . Angular 1.0.3 +, . (. , .) , myArrayOfPrimitives, . , .
, ( ) . (. .,num
, ng-model) . ng-repeat , :
( .)
, . , , .
. ng-model, ng-repeat, inputs ng-repeat and databinding
ng-view
, , , ng-include.
ng-controller
( ng-controller) , ng-include ng-switch, . « $scope» — onehungrymind.com/angularjs-sticky-notes-pt-1-architecture . .
( , . . . Controller load order differs when loading or navigating )
(scope: false
) — , . , , , , , , . , .
scope: true
— , . ( DOM ) , . . . «» , ng-include ng-switch, .
scope: { ... }
— . . , , . . . , .
- ( «=») ( «@») . «&» . , , . ,
— -, . ,parentProp
:{scope: localProp: '@parentProp' }
. :scope: { localProp: '@theParentProp' }
.
__proto__
Scope ( , «Scope» «Object»). $parent , , , .
<my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">
scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
, :scope.someIsolateProp = "I'm isolated"
:attrs.$observe('attr_name', function(value) { ... }
, «@». , —attrs.$observe('interpolated', function(value) { ... }
—value
11. (scope.interpolatedProp
. ,scope.twowayBindingProp
, . . «=».)
onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope
transclude: true
— «» , . , (. ., , ng-transclude) , $parent ,
( ) — $parent . , $$nextSibling .
. AngularJS two way binding not working in directive with transcluded scope
, :transclude: true
showScope()
. .
:
— ng-include, ng-switch, ng-controller,scope: true
— ng-repeat. ng-repeat , . —scope: {...}
. , «=», «@», «&» . —transclude: true
. , - .
( ), - (. . ), $parent, $$childHead $$childTail.
-