angularjs deux directives sur l'un des éléments

J'ai deux directives:

//Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
  return {
    scope: {
      focus: "=focusMe"
    },
    link: function(scope, element) {
      return scope.$watch("focus", function(value) {
        if (value === true) {
          element[0].focus();
          return scope.focus = false;
        }
      });
    }
  };
});

et:

//Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
  return {
    scope: {
      clean: "=cleanMe"
    },
    link: function(scope, element) {
      return scope.$watch("clean", function(value) {
        if (value === true) {
          element[0].value = "";
          return scope.clean = false;
        }
      });
    }
  };
});

et cette entrée (angularUI):

<input type="text" ng-model="addUserSelected" typeahead="emp.value for emp in allUsers | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="addLine($item.id)" focus-me="usersFocusInput" clean-me="usersCleanInput">

J'obtiens cette erreur:

Error: [$compile:multidir] http://errors.angularjs.org/1.2.3/$compile/multidir?p0=cleanMe&p1=focusMe&p…2%20focus-me%3D%22usersFocusInput%22%20clean-me%3D%22usersCleanInput%22%3E

que dois-je faire de mal?

Si je supprime le nettoyer-moi bien de le html, il fonctionne.

Grâce

  • pourquoi ne pas vous venez de mettre à zéro le modèle que ng-model est lié? Je soupçonne que vous n'avez pas besoin cleanMe directive
  • cleanMe est pas au point, il peut y avoir 2 (ou plus) des directives. nettoyez-moi et le moi, c'est juste pour l'exemple.
InformationsquelleAutor Noampz | 2013-12-09
  1. 8

    Il n'y a pas de réel besoin pour des étendues de ici. L'utilisation "normale" champ d'application de la directive et de la directive sera juste d'hériter de son parent, comme ceci:

    //Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
  return {
    link: function(scope, element, attrs) {
      return scope.$watch(attrs.focusMe, function(focusMe) {
        if (focusMe.value === true) {
          element[0].focus();
          return scope[attrs.focusMe].value = false;
        }
      });
    }
  };
});

//Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
  return {
    link: function(scope, element, attrs) {
      return scope.$watch(attrs.cleanMe, function(cleanMe) {
        if (cleanMe.value === true) {
          element[0].value = "";
          return scope[attrs.cleanMe].value = false;
        }
      });
    }
  };
});

    Ignorer cette partie si vous savez déjà comment l'héritage des œuvres, tout en ajoutant de l'exhaustivité:

    Noter que je suis en utilisant le [attrs.focusMe].valeur, non seulement [attrs.focusMe]. La raison en est la façon dont l'héritage fonctionne en javascript. Ces directives sont enfant étendues, donc si vous essayez de faire champ d'application[attrs.focusMe] = false vous allez définir une variable locale dans le champ d'application de la directive, c'est à dire que vous n'affectera pas la portée parent (le contrôleur où il est utilisé). Cependant, si vous faites le focusMe modèle (quel qu'il soit) un objet de la portée parent, puis changer la valeur de cet objet, alors il sera pas définir une variable locale, il sera plutôt mise à jour de la mère. Donc:

    scope[attrs.focusMe] = false; //Sets a local variable, does not affect the parent
scope[attrs.focusMe].value = false; //Updates focusMe on the parent

    Ici est une bonne réponse à propos de l'héritage si vous voulez un guide de profondeur: Quelles sont les nuances de portée prototypes /l'héritage par prototype dans AngularJS?

    • Correction d'une erreur avec l'étendue, il doit être portée[attrs.focusMe].valeur pas la portée.focusMe.valeur bien sûr. Vous voulez que le champ d'application variable wpointed par le focusMe attribut. Aussi, si la valeur de l'alimentation il n'est pas sur la "racine", comme quelque chose.usersFocusInput, puis il prend un peu plus d'effort pour changer.
    InformationsquelleAutor Erik Honn
  2. 5

    Vous avez deux directives qui exigent isolé portée sur le même élément qui n'est pas autorisé.

    La raison de ce qui n'est pas autorisé est parce que si vous avez quelques modèles de {{...}} code à l'intérieur de la directive, alors il sera difficile de savoir à quelle portée il devrait prendre ses valeurs à partir d'.

    Considérer au lieu d'isoler la portée, à l'aide de attribut.$observer pour regarder le cleanMe et focusMe propriétés et d'agir sur ceux-ci.

    app.directive("focusMe", function() {
  return {
    link: function(scope, element, attributes) {
      attributes.$observe("focusMe", function(value) {
        if (value === true) {
          element[0].focus();
          scope.focus = false;
        }
      });
    }
  };
});

    et:

    app.directive("cleanMe", function() {
  return {
    link: function(scope, element, attributes) {
      attributes.$observe("cleanMe", function(value) {
        if (value === true) {
          element[0].value = "";
          return scope.clean = false;
        }
      });
    }
  };
});
    • Première yhanks vous pour votre aide!! il y a 2 problèmes avec cette solution pour moi: d'abord la "valeur" est égal à "usersFocusInput" au lieu de la valeur du paramètre dans le champ $champ d'application.usersFocusInput qui devrait être vrai/faux. deuxième portée.nettoyer n'est pas défini et que je veux remplacer $champ d'application.usersFocusInput dos à faux.
    • Alors vous voulez utiliser scope.$parent.watch(attributes['focusMe'], ...) et définir scope.$parent[attributes['focusMe']] = false. De même pour cleanMe. Cela fonctionne pour vous?
    • Pourquoi ne pas simplement portée.$regarder(attributs.focusMe)?
    • À moins que la directive de l'héritage est modifié à partir de la 1.1 branche à la branche 1.2 qui devrait fonctionner très bien, étant donné que la directive va hériter de la portée où il est utilisé.
    • À moins d'un accidentellement définit les "focusMe' sur la portée actuelle. À l'aide de $scope.$parent permettra de parer à cette erreur. Aussi, tout en remplaçant la propriété, on doit utiliser $scope.$parent de peur que quelqu'un doit écrire correctement sur le domaine local.
    • Faute de frappe de ma part, il convient d'attributs.focusMe. La définition de focusMe sur le bon champ d'application n'affecte pas du tout. Aussi, vous devez (en général) ne pas utiliser $parent pour mettre à jour la propriété d'un parent, vous devez utiliser un objet. Faire $champ d'application.foo.value = 'quelque chose' est mieux que de le faire $scope.$parent.valeur = "quelque chose".
    • Corriger portée... je voulais dire une portée locale bien sûr 😛
    • Merci à vous tous!!! J'ai écrit la solution. encore une fois, Merci!

    InformationsquelleAutor musically_ut
  3. 1

    J'ai trouvé la solution, enfin 🙂

    //Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
  return {
    link: function(scope, element, attributes) {
      return scope.$watch(attributes.focusMe, function(value) {
        if (scope[value] === true) {
          element[0].focus();
          return scope[attributes.focusMe] = false;
        }
      });
    }
  };
});

//Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
  return {
    link: function(scope, element, attributes) {
      return scope.$watch(attributes.cleanMe, function(value) {
        if (value === true) {
          element[0].value = "";
          return scope[attributes.cleanMe] = false;
        }
      });
    }
  };
});

    Dans le code html usersFocusInput et usersCleanInput sont des paramètres dans l'étendue est wht-je utiliser de la portée[attributs.focusMe] pour obtenir ce paramètre et changer pour de faux.

    <input type="text" ng-model="addUserSelected" typeahead="emp.value for emp in allUsers | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="addLine($item.id)" focus-me="usersFocusInput" clean-me="usersCleanInput">
    • Presque, mais pas tout à fait. 🙂 A noter que la portée[attributs.focusMe] = false définir une variable locale dans la directive, il ne sera pas mise à jour le contrôleur de parent. Vous avez besoin d'en faire un objet (ou d'utiliser $parent) pour que les. Voir ma réponse ci-dessus/ci-dessous/partout où il arrive à être pour le moment.
    InformationsquelleAutor Noampz