Ce qui suit pourrait être exécuté dans démo ici.
c'est 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>
Et c'est 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;
}
}]);
Cela devrait être un bon exemple pour trois types deportée contraignante dans les directives. Cependant, cela ne fonctionne tout simplement pas lorsque j'essaye de changer une version angulaire supérieure - (1.2.27). Je soupçonne l'ombre de la portée héritée dans la directive, mais je n'en suis pas sûr.
Réponses:
1 pour la réponse № 1Cela ne fonctionnera pas comme prévu. Des étendues isolées sont créées et fournies au Link, Compile, et Template parties d’une directive. Cependant, le HTML dans le Element lui-même ne fait pas partie de la directive. Ces parties HTML sont toujours liées au parent $scope. Si vous avez tendance à donner le même nom à vos objets de portée isolés, vous venez peut-être de travailler contre le $scope involontairement et n'a remarqué aucun effet néfaste. Si votre HTML était dans un Template plutôt qu'à l'intérieur du Element, il accèderait à la portée d'isolat.
À titre d'exemple, dans le HTML qui est en ligne dans le Element, tu peux appeler updateFoo(), mais cela ne serait pas possible de l'intérieur d'un Template