Aviso: atualizo esta resposta à medida que encontro melhores soluções. Também mantenho as respostas antigas para referência futura, desde que permaneçam relacionadas. A melhor e mais recente resposta vem em primeiro lugar.
Melhor resposta:
As diretivas nos angularjs são muito poderosas, mas leva tempo para compreender quais processos estão por trás delas.
Ao criar diretivas, o angularjs permite criar um escopo isolado com algumas ligações ao escopo pai. Essas ligações são especificadas pelo atributo no qual você anexa o elemento no DOM e como você define a propriedade do escopo no objeto de definição de diretiva .
Existem 3 tipos de opções de ligação que você pode definir no escopo e gravá-las como atributo relacionado a prefixos.
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>
Nesse caso, no escopo da diretiva (seja na função de vinculação ou no controlador), podemos acessar essas propriedades assim:
/* 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 .
Resposta "Ainda OK":
Como essa resposta foi aceita, mas tem alguns problemas, vou atualizá-la para uma melhor. Aparentemente, $parseé um serviço que não se encontra nas propriedades do escopo atual, o que significa que apenas utiliza expressões angulares e não pode alcançar o escopo.
{{, }}expressões são compiladas durante o início do angularjs, o que significa que, quando tentamos acessá-las em nosso postlinkmétodo de diretivas , elas já são compiladas. ( já {{1+1}}está 2na diretiva).
É assim que você deseja usar:
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>
Uma coisa que você deve notar aqui é que, se quiser definir a cadeia de valor, coloque-a entre aspas. (Veja a terceira entrada)
Aqui está o violino para brincar: http://jsfiddle.net/neuTA/6/
Resposta antiga:
Não estou removendo isso para pessoas que podem ser enganadas como eu; observe que o uso $evalé perfeitamente adequado da maneira correta, mas $parsetem um comportamento diferente; provavelmente você não precisará disso na maioria dos casos.
A maneira de fazer isso é, mais uma vez, usando scope.$eval. Além de compilar a expressão angular, também tem acesso às propriedades do escopo atual.
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+ scope.$eval(attr.value));
}
});
function MyCtrl($scope) {
}
O que você está perdendo era $eval.
http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval
Executa a expressão no escopo atual retornando o resultado. Quaisquer exceções na expressão são propagadas (não capturadas). Isso é útil ao avaliar expressões angulares.