Uyarı: Daha iyi çözümler bulduğum için bu cevabı güncelliyorum. Ayrıca, eski yanıtları ilgili oldukları sürece ileride başvurmak üzere saklarım. En son ve en iyi cevap önce gelir.
Daha iyi cevap:
Angularjs'deki direktifler çok güçlüdür, ancak arkasında hangi süreçlerin yattığını anlamak zaman alır.
Direktifler oluştururken, angularjs , ana kapsama bazı bağlamalar ile yalıtılmış bir kapsam oluşturmanıza izin verir . Bu bağlamaları tarafından belirtilen öznitelik DOM içinde eleman eklemek ve nasıl tanımladığına kapsam tesisle yönergesi tanım nesnesi .
Kapsamda tanımlayabileceğiniz 3 tür bağlama seçeneği vardır ve bunları öneklerle ilgili öznitelik olarak yazarsınız.
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>
Bu durumda, yönerge kapsamında (bağlantı fonksiyonunda veya denetleyicide olsun), bu özelliklere şu şekilde erişebiliriz:
/* 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 .
"Hala iyi" Cevap:
Bu yanıt kabul edildiğinden, ancak bazı sorunları olduğundan, daha iyi bir cevapla güncelleyeceğim. Görünüşe göre, $parsemevcut kapsamın özelliklerinde yer almayan bir hizmettir, yani sadece açısal ifadeler alır ve kapsama ulaşamaz.
{{, }}Bizim direktifler bunları erişmeye çalıştığınızda angularjs hangi aracı başlatılması sırasında ifadeleri derlenmektedir postlinkyöntemle, zaten derlenmektedir. ( {{1+1}}Olduğu 2zaten yönergede).
Bu şekilde kullanmak istersiniz:
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>
Burada dikkat etmeniz gereken bir şey, eğer değer dizesini ayarlamak istiyorsanız, onu tırnak içine almanız gerektiğidir. (Bkz. 3. giriş)
İşte oynamak için keman: http://jsfiddle.net/neuTA/6/
Eski Cevap:
Benim gibi yanıltılabilen insanlar için bunu kaldırmıyorum, kullanmanın $evaldoğru yolun mükemmel olduğunu, ancak $parsefarklı bir davranışa sahip olduğunu unutmayın, muhtemelen çoğu durumda kullanmak için buna ihtiyacınız olmayacaktır.
Bunu yapmanın yolu bir kez daha kullanmaktır scope.$eval. Sadece açısal ifadeyi derlemekle kalmaz, aynı zamanda geçerli kapsamın özelliklerine de erişebilir.
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+ scope.$eval(attr.value));
}
});
function MyCtrl($scope) {
}
Eksik olan neydi $eval.
http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval
Sonucu döndüren geçerli kapsamdaki ifadeyi yürütür. İfadedeki istisnalar yayılır (yakalanmaz). Bu, açısal ifadeleri değerlendirirken faydalıdır.