Можна застосувати наступне демонстрація тут
це 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>
І це 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;
}
}]);
Це має бути хорошим прикладом для трьох видівприв'язка обсягу в директивах. Однак, це просто не працює, коли я намагаюся переключити вищу кутову версію - (1.2.27). Я підозрюю тінь успадкованої області в директиві, але я не впевнений у цьому.
Відповіді:
1 для відповіді № 1Це не буде працювати так, як ви очікуєте. Ізольовані сфери створюються та надаються в Link, Compile, і Template частини директиви. Однак HTML всередині Element сам по собі фактично не є частиною Директиви. Ці HTML-частини все ще прив'язані до батьківського $scope. Якщо у вас є тенденція називати ваші ізольовані об'єкти обсягу однаковими, можливо, ви щойно працювали проти $scope ненавмисно і не помітив жодних негативних наслідків. Якщо ваш HTML був у Template а не всередині Element, він отримає доступ до області ізоляції.
Як приклад, у HTML, який є вбудованим у Element, можна зателефонувати updateFoo(), але це було б неможливо зсередини a Template