Deux directives demandant une portée isolée et une portée héritée sur le même élément - angularjs

J'ai déclaré deux directives sur un élément: l'une demandant une étendue isolée et l'autre demandant une étendue héritée. Voici:

Le code

angular.module("myApp", [])
.directive("myDirective", function() {
return {
restrict: "A",
scope: {
users: "="
},
templateUrl: "users-info.html",
link: function(scope) {
scope.title = "From My Directive";
}
}
})
.directive("otherDirective", function() {
return {
restrict: "A",
scope: true,
link: function(scope) {
scope.title = "From Other Directive";
}
};
})
.controller("AppController", function($scope) {
$scope.users = [
{name: "Anup Vasudeva", username: "anup_vasudeva"},
{name: "Ajay Sharma", username: "ajay_sharma"},
{name: "Vinay Kumar", username: "vinay_kumar"}
];
$scope.title = "Users Information";
});

et le HTML

<div my-directive other-directive>{{title}}</div>

Mais AngularJS génère une erreur en mentionnant l’URL:

http://docs.angularjs.org/error/$compile/multidir

Mais dans la description des erreurs, je ne vois pas un point où il est dit que plusieurs directives demandant une portée isolée et héritée ne sont pas autorisées.

** MODIFIER ** Cela semble étrange, quand j'ai utilisé angulaire v1.2.0-rc.2, le scénario ci-dessus fonctionne bien. le otherDirective obtient une portée isolée même si elle demande la portée partagée. Mais ce scénario ne fonctionne pas dans la dernière version.

Réponses:

2 pour la réponse № 1

Vous obtenez une erreur car vos deux directives demandent une étendue isolée.

Pour résoudre ce problème, définissez l'option de portée sur false pour la directive pour laquelle vous ne voulez pas de portée isolée:

app.directive("otherDirective", function() {
return {
restrict: "A",
scope: false,
link: function(scope) {
scope.title = "From Other Directive";
}
};
});

voici un violon

En fait, vous pouvez également omettre la propriété scope pour le même effet.

---

0 pour la réponse № 2

AngularJS n'autorise qu'un seul domaine isolé par élément. Si soit si vous faites

scope: true

ou

scope: {/* something */}

dans deux directives sur le même élément, cela signifie simplement que vous demandez deux étendues isolées sur le même élément.

Essayer avec

scope: false

dans otherDirective

---