Perhatikan: Saya memperbarui jawaban ini karena saya menemukan solusi yang lebih baik. Saya juga menyimpan jawaban lama untuk referensi di masa mendatang asalkan tetap terkait. Jawaban terbaru dan terbaik didahulukan.
Jawaban yang lebih baik:
Arahan dalam angular sangat kuat, tetapi perlu waktu untuk memahami proses yang ada di belakangnya.
Saat membuat arahan, angularjs memungkinkan Anda untuk membuat ruang lingkup yang terisolasi dengan beberapa ikatan pada ruang lingkup induk. Binding ini ditentukan oleh atribut yang Anda lampirkan elemen di DOM dan bagaimana Anda mendefinisikan properti lingkup dalam objek definisi direktif .
Ada 3 jenis opsi pengikatan yang dapat Anda tetapkan dalam ruang lingkup dan Anda menuliskannya sebagai atribut terkait awalan.
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>
Dalam hal ini, dalam lingkup arahan (apakah itu dalam fungsi penghubung atau pengontrol), kita dapat mengakses properti ini seperti ini:
/* 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 .
"Masih OK" Jawab:
Karena jawaban ini diterima, tetapi memiliki beberapa masalah, saya akan memperbaruinya ke yang lebih baik. Rupanya, $parseadalah layanan yang tidak terletak pada properti lingkup saat ini, yang berarti hanya mengambil ekspresi sudut dan tidak dapat mencapai ruang lingkup.
{{, }}ekspresi dikompilasi ketika angular memulai, yang berarti ketika kita mencoba mengaksesnya dalam postlinkmetode arahan kita , mereka sudah dikompilasi. ( {{1+1}}sudah 2dalam arahan).
Inilah yang ingin Anda gunakan:
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>
Satu hal yang harus Anda perhatikan di sini adalah, jika Anda ingin mengatur nilai string, Anda harus membungkusnya dengan tanda kutip. (Lihat input ke-3)
Inilah biola yang bisa dimainkan: http://jsfiddle.net/neuTA/6/
Jawaban lama:
Saya tidak menghapus ini untuk orang-orang yang dapat disesatkan seperti saya, perhatikan bahwa menggunakan $evalsangat baik cara yang benar untuk melakukannya, tetapi $parsememiliki perilaku yang berbeda, Anda mungkin tidak akan memerlukan ini untuk digunakan dalam sebagian besar kasus.
Cara untuk melakukannya adalah, sekali lagi, menggunakan scope.$eval. Tidak hanya mengkompilasi ekspresi sudut, ia juga memiliki akses ke properti lingkup saat ini.
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+ scope.$eval(attr.value));
}
});
function MyCtrl($scope) {
}
Apa yang Anda lewatkan adalah $eval.
http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval
Menjalankan ekspresi pada lingkup saat ini untuk mengembalikan hasilnya. Setiap pengecualian dalam ekspresi disebarkan (tidak tertangkap). Ini berguna ketika mengevaluasi ekspresi sudut.