Można uruchomić następujące próbny tutaj.
to jest 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 to jest 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;
}
}]);
To powinien być dobry przykład dla trzech rodzajówzakres wiążący w dyrektywach.Jednak po prostu nie działa, gdy próbuję przełączyć wyższą wersję kątową - (1.2.27). Podejrzewam cień dziedziczonego zakresu w dyrektywie, ale nie jestem tego pewien.
Odpowiedzi:
1 dla odpowiedzi № 1To nie zadziała tak, jak tego oczekujesz. Pojedyncze zakresy są tworzone i dostarczane do Link, Compile, i Template części dyrektywy. Jednak HTML w Element sama w sobie nie jest częścią dyrektywy. Te części HTML są nadal powiązane z rodzicem $scope. Jeśli masz tendencję do nazywania obiektów izolowanych zakresów tym samym, być może właśnie pracowałeś przeciwko $scope nieumyślnie i nie zauważyłem żadnych złych skutków. Jeśli twój HTML był w a Template zamiast wewnątrz Element, uzyska dostęp do zakresu izolatu.
Jako przykład w HTML, który jest wbudowany w Element, możesz zadzwonić updateFoo(), ale nie byłoby to możliwe od wewnątrz Template