Nasledujúce položky môžu byť spustené v demonštrácie tu.
toto je html:
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated.
-->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
A toto je js:
var myModule = angular.module("myModule", [])
.directive("myComponent", function () {
return {
restrict:"E",
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:"@attributeFoo",
isolatedBindingFoo:"=bindingFoo",
isolatedExpressionFoo:"&"
}
};
})
.controller("MyCtrl", ["$scope", function ($scope) {
$scope.foo = "Hello!";
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
Mal by to byť dobrý príklad pre tri druhyzáväznosť rozsahu v smerniciach. Ibaže to nefunguje, keď sa pokúšam prepnúť na vyššiu uhlovú verziu - (1.2.27). Mám podozrenie na tieň zdedeného rozsahu v rámci smernice, ale nie som si tým istý.
odpovede:
1 pre odpoveď č. 1Toto nebude fungovať tak, ako čakáte. Izolované obory sa vytvárajú a poskytujú sa Link, Compile, a Template časti smernice. Avšak HTML v rámci Element sama osebe v skutočnosti nie je súčasťou smernice. Tieto časti HTML sú stále viazané na rodiča $scope. Ak máte tendenciu pomenovať svoje izolované objekty rozsahu rovnako, možno ste práve pracovali proti $scope neúmyselne a nevšimol si žiadny nepriaznivý vplyv. Ak bol váš kód HTML v a Template skôr ako vo vnútri Element, získal by prístup k rozsahu izolátu.
Napríklad v HTML, ktorý je vložený do Element, môžeš zavolať updateFoo(), ale to by nebolo možné z vnútra a Template