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.