Comment obtenir des attributs évalués dans une directive personnalisée

J'essaie d'obtenir un attribut évalué de ma directive personnalisée, mais je ne trouve pas la bonne façon de le faire.

J'ai créé ce jsFiddle pour élaborer.

<div ng-controller="MyCtrl">
    <input my-directive value="123">
    <input my-directive value="{{1+1}}">
</div>

myApp.directive('myDirective', function () {
    return function (scope, element, attr) {
        element.val("value = "+attr.value);
    }
});

Qu'est-ce que je rate?

Remarque: je mets à jour cette réponse car je trouve de meilleures solutions. Je garde également les anciennes réponses pour référence future tant qu'elles restent liées. La dernière et la meilleure réponse vient en premier.

Meilleure réponse:

Les directives dans angularjs sont très puissantes, mais il faut du temps pour comprendre quels processus se cachent derrière elles.

Lors de la création de directives, angularjs vous permet de créer une portée isolée avec quelques liaisons à la portée parent. Ces liaisons sont spécifiées par l' attribut auquel vous attachez l'élément dans DOM et la façon dont vous définissez la propriété scope dans l' objet de définition de directive .

Il existe 3 types d'options de liaison que vous pouvez définir dans la portée et que vous écrivez en tant qu'attribut lié aux préfixes.

angular.module("myApp", []).directive("myDirective", function () {
    return {
        restrict: "A",
        scope: {
            text: "@myText",
            twoWayBind: "=myTwoWayBind",
            oneWayBind: "&myOneWayBind"
        }
    };
}).controller("myController", function ($scope) {
    $scope.foo = {name: "Umur"};
    $scope.bar = "qwe";
});

HTML

<div ng-controller="myController">
    <div my-directive my-text="hello {{ bar }}" my-two-way-bind="foo" my-one-way-bind="bar">
    </div>
</div>

Dans ce cas, dans le champ d'application de la directive (que ce soit dans la fonction de liaison ou le contrôleur), nous pouvons accéder à ces propriétés comme ceci:

/* Directive scope */

in: $scope.text
out: "hello qwe"
// this would automatically update the changes of value in digest
// this is always string as dom attributes values are always strings

in: $scope.twoWayBind
out: {name:"Umur"}
// this would automatically update the changes of value in digest
// changes in this will be reflected in parent scope

// in directive's scope
in: $scope.twoWayBind.name = "John"

//in parent scope
in: $scope.foo.name
out: "John"


in: $scope.oneWayBind() // notice the function call, this binding is read only
out: "qwe"
// any changes here will not reflect in parent, as this only a getter .

"Toujours OK" Réponse:

Depuis que cette réponse a été acceptée, mais a quelques problèmes, je vais la mettre à jour pour une meilleure. Apparemment, $parsec'est un service qui ne réside pas dans les propriétés de la portée actuelle, ce qui signifie qu'il ne prend que des expressions angulaires et ne peut pas atteindre la portée. {{, les }}expressions sont compilées lors de l'initiation de angularjs, ce qui signifie que lorsque nous essayons d'y accéder dans notre postlinkméthode de directives , elles sont déjà compilées. ( {{1+1}}est 2déjà dans la directive).

Voici comment vous souhaitez utiliser:

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function ($parse) {
    return function (scope, element, attr) {
        element.val("value=" + $parse(attr.myDirective)(scope));
    };
});

function MyCtrl($scope) {
    $scope.aaa = 3432;
}​

.

<div ng-controller="MyCtrl">
    <input my-directive="123">
    <input my-directive="1+1">
    <input my-directive="'1+1'">
    <input my-directive="aaa">
</div>​​​​​​​​

Une chose que vous devez noter ici est que, si vous souhaitez définir la chaîne de valeur, vous devez la mettre entre guillemets. (Voir 3e entrée)

Voici le violon avec lequel jouer: http://jsfiddle.net/neuTA/6/

Ancienne réponse:

Je ne supprime pas cela pour les gens qui peuvent être induits en erreur comme moi, notez que l'utilisation $evalest parfaitement bien la bonne façon de le faire, mais $parsea un comportement différent, vous n'aurez probablement pas besoin de cela pour utiliser dans la plupart des cas.

La façon de le faire est, encore une fois, d'utiliser scope.$eval. Non seulement il compile l'expression angulaire, mais il a également accès aux propriétés de la portée actuelle.

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function () {
    return function (scope, element, attr) {
        element.val("value = "+ scope.$eval(attr.value));
    }
});

function MyCtrl($scope) {

}​

Ce qui vous manquait était $eval.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval

Exécute l'expression sur la portée actuelle renvoyant le résultat. Toutes les exceptions dans l'expression sont propagées (non capturées). Ceci est utile lors de l'évaluation des expressions angulaires.

Pour une valeur d'attribut qui doit être interpolée dans une directive qui n'utilise pas une portée isolée, par exemple,

<input my-directive value="{{1+1}}">

utiliser la méthode des attributs $observe:

myApp.directive('myDirective', function () {
  return function (scope, element, attr) {
    attr.$observe('value', function(actual_value) {
      element.val("value = "+ actual_value);
    })
 }
});

Depuis la page des directives ,

observation des attributs interpolés: permet $observed'observer les changements de valeur des attributs qui contiennent une interpolation (par exemple src="{{bar}}"). Non seulement cela est très efficace, mais c'est également le seul moyen d'obtenir facilement la valeur réelle car pendant la phase de liaison, l'interpolation n'a pas encore été évaluée et la valeur est alors définie sur undefined.

Si la valeur d'attribut est juste une constante, par exemple,

<input my-directive value="123">

vous pouvez utiliser $ eval si la valeur est un nombre ou un booléen, et vous voulez le type correct:

return function (scope, element, attr) {
   var number = scope.$eval(attr.value);
   console.log(number, number + 1);
});

Si la valeur d'attribut est une constante de chaîne ou si vous souhaitez que la valeur soit de type chaîne dans votre directive, vous pouvez y accéder directement:

return function (scope, element, attr) {
   var str = attr.value;
   console.log(str, str + " more");
});

Dans votre cas, cependant, puisque vous souhaitez prendre en charge les valeurs et les constantes interpolées, utilisez $observe.

Les autres réponses ici sont très correctes et précieuses. Mais parfois, vous voulez simplement: obtenir une ancienne valeur analysée simple lors de l'instanciation de la directive, sans avoir besoin de mises à jour et sans gâcher la portée de l'isolat. Par exemple, il peut être utile de fournir une charge utile déclarative dans votre directive sous forme de tableau ou d'objet de hachage sous la forme:

my-directive-name="['string1', 'string2']"

Dans ce cas, vous pouvez aller droit au but et utiliser simplement un joli basique angular.$eval(attr.attrName).

element.val("value = "+angular.$eval(attr.value));

Violon de travail .

Pour la même solution que je cherchais Angularjs directive with ng-Model.
Voici le code qui résout le problème.

    myApp.directive('zipcodeformatter', function () {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController
        link: function (scope, element, attrs, ngModel) {

            scope.$watch(attrs.ngModel, function (v) {
                if (v) {
                    console.log('value changed, new value is: ' + v + ' ' + v.length);
                    if (v.length > 5) {
                        var newzip = v.replace("-", '');
                        var str = newzip.substring(0, 5) + '-' + newzip.substring(5, newzip.length);
                        element.val(str);

                    } else {
                        element.val(v);
                    }

                }

            });

        }
    };
});

DOM HTML

<input maxlength="10" zipcodeformatter onkeypress="return isNumberKey(event)" placeholder="Zipcode" type="text" ng-readonly="!checked" name="zipcode" id="postal_code" class="form-control input-sm" ng-model="patient.shippingZipcode" required ng-required="true">

Mon résultat est:

92108-2223

var myApp = angular.module('myApp',[]);

myApp .directive('myDirective', function ($timeout) {
    return function (scope, element, attr) {
        $timeout(function(){
            element.val("value = "+attr.value);
        });

    }
});

function MyCtrl($scope) {

}

Utilisez $ timeout car la directive appelle après le chargement de dom pour que vos modifications ne s'appliquent pas