Quelle est la différence entre la portée:{} et la portée:vrai à l'intérieur de la directive?

Je ne trouve pas cette information sur le Angular.js et je remarque alors que je travaillais que ces deux valeurs sont différentes. Quelle est la différence?

.directive('foo', function() {

  return {
    scope: true
  };
});

.directive('foo', function() {

  return {
    scope: {}
  };
});
  • Mmm, Si je suis correct, étendue=={} vérifie juste l'id de la portée est un objet vide, tandis que le vrai est toujours vrai. Quel est exactement votre doute?
  • Vous vous demandez quelle est la différence entre un booléen et un objet vide ? Et attention du boiteux "==" vérifier. Préférez "===" stricte comparaison
  • Je veux parler d'angular.js la portée de l'attribut.
  • vous aussi..
  • si vous êtes en dehors du contexte de la maintenant 😀
InformationsquelleAutor jcubic | 2014-07-02
  1. 50

    Les deux scope: true et scope:{} permettra de créer un enfant du champ d'application de la directive. Mais,

    scope:true sera fait hériter des propriétés de la société mère(dire le contrôleur de la directive en vertu de l') où, comme scope:{} n'hériteront pas les propriétés de la mère et donc appelée isolated

    Par exemple, disons que nous avons un contrôleur c1 et deux directives d1 et d2,

    app.controller('c1', function($scope){
  $scope.prop = "some value";
});

.directive('d1', function() {
  return {
    scope: true
  };
});

.directive('d2', function() {
  return {
    scope: {}
  };
});

<div ng-controller="c1">
  <d1><d1>
  <d2><d2>
</div>

    d1(portée:true) auront accès à c1 champ d'application -> prop où que d2 est isolé de la c1 portée.

    Note 1: les Deux d1 et d2 créer un nouveau champ d'application pour chaque directive définie.

    Note 2: en dehors de la différence entre les deux, pour scope:true - Toutes les modifications apportées à l'enfant, de la portée va pas réfléchir à la portée parent. Cependant, depuis le nouveau champ d'application est héritée de la mère de la portée, toute modification de la c1 portée(le parent) sera reflété dans le champ d'application de la directive.

    Astuce: Utilisation scope:{} ou isolated scope pour réutilisables angulaire directives. De sorte que vous ne finissent pas de jouer avec le parent propriétés de l'étendue

    InformationsquelleAutor guru
  2. 25

    portée : "true"

    Angular JS va créer un nouveau champ d'application en héritant parent ( habituellement contrôleur de portée, d'autre racine de l'application Champ d'application ).

    Note : Toutes les modifications apportées à ce nouveau champ d'application ne se traduisent pas en arrière à la portée parent. Cependant, depuis le nouveau champ d'application est héritée de la mère de la portée, toute modification de la portée parent c'est à dire le contrôleur sera reflété dans le champ d'application de la directive.

    portée : "false"

    Le contrôleur et la directive utilisez le même champ d'application de l'objet. Ceci signifie que toutes les modifications apportées à la manette ou de la directive seront synchronisés.

    portée : "{}"

    Nouveau champ créé par la directive, mais il ne sera pas hérité de la portée parent. Ce nouveau champ d'application aussi connu comme Isolé portée, car il est complètement détaché de son parent.

    InformationsquelleAutor Jeet
  3. 3

    portée: vrai crée un nouveau champ d'application de la directive, qui hérite de tout, de la parents

    portée : {} crée également un nouveau champ d'application de la directive, mais il est isolé, donc il n'a pas héritent de leurs parents

    Prendre un coup d'oeil a cet article:

    http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

    InformationsquelleAutor cuttlas
  4. 2

    scope: true crée un champ qui n'est pas isolée des parents de la portée, il hérite de la parents de la portée, tandis que scope: {} crée un champ isolé de la société mère.

    InformationsquelleAutor nicael
  5. 1

    La "portée" de la déclaration dans un AngularJS directive est une propriété de la "Directive de la Définition de l'Objet", qui est ce qui est fait renvoyé par la directive de la fonction que vous définissez. Les options pour "champ d'application" sont documentées dans l'officiel angulaire de la documentation pour une Directive de Définition de l'Objet:

    https://docs.angularjs.org/api/ng/service/$compiler#la directive-notion-objet

    Voici l'explication prises directement à partir de la documentation:

    champ d'application

    Le champ d'application de la propriété peut être faux, vrai, ou d'un objet:

    faux (par défaut): Pas de portée sera créé pour la directive. L'
    la directive va utiliser l'un de ses parents portée.

    vrai: Un nouvel enfant qui fait hérite de son parent
    sera créé pour la directive de l'élément. Si plusieurs directives sur
    le même élément de la demande d'un nouveau champ d'application, qu'une nouvelle est créée.

    {...} (un objet de hachage): Un nouveau "isoler" champ d'application est créé pour les
    directive du modèle. L' "d'isoler" la portée diffère de la portée normale dans
    qu'il n'a pas fait hériter de son parent. C'est
    utile lors de la création de composants réutilisables, ce qui ne devrait pas
    accidentellement lire ou modifier des données dans la portée parent. Notez qu'une
    isoler le champ d'application de la directive sans modèle ou templateUrl ne sera pas
    appliquer les isoler de la portée de ses éléments enfants.

    InformationsquelleAutor Chris Halcrow