Lưu ý: Tôi cập nhật câu trả lời này khi tôi tìm giải pháp tốt hơn. Tôi cũng giữ các câu trả lời cũ để tham khảo trong tương lai miễn là chúng vẫn liên quan. Câu trả lời mới nhất và tốt nhất đến trước.
Câu trả lời tốt hơn:
Các chỉ thị trong angularjs rất mạnh mẽ, nhưng cần có thời gian để hiểu được quá trình nào nằm sau chúng.
Trong khi tạo các lệnh, angularjs cho phép bạn tạo một phạm vi tách biệt với một số ràng buộc với phạm vi cha. Các ràng buộc này được chỉ định bởi thuộc tính bạn đính kèm phần tử trong DOM và cách bạn xác định thuộc tính phạm vi trong đối tượng định nghĩa chỉ thị .
Có 3 loại tùy chọn ràng buộc mà bạn có thể xác định trong phạm vi và bạn viết chúng là thuộc tính liên quan đến tiền tố.
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>
Trong trường hợp đó, trong phạm vi chỉ thị (cho dù đó là trong chức năng liên kết hoặc bộ điều khiển), chúng ta có thể truy cập các thuộc tính như thế này:
/* 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 .
"Vẫn ổn" Trả lời:
Vì câu trả lời này đã được chấp nhận, nhưng có một số vấn đề, tôi sẽ cập nhật nó để tốt hơn. Rõ ràng, $parselà một dịch vụ không nằm trong các thuộc tính của phạm vi hiện tại, có nghĩa là nó chỉ có các biểu thức góc và không thể đạt đến phạm vi.
{{, các }}biểu thức được biên dịch trong khi angularjs khởi tạo có nghĩa là khi chúng ta cố gắng truy cập chúng trong postlinkphương thức chỉ thị của chúng , chúng đã được biên dịch. (đã {{1+1}}có 2trong chỉ thị rồi).
Đây là cách bạn muốn sử dụng:
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>
Một điều bạn nên chú ý ở đây là, nếu bạn muốn đặt chuỗi giá trị, bạn nên gói nó trong dấu ngoặc kép. (Xem đầu vào thứ 3)
Đây là câu đố để chơi với: http://jsfiddle.net/neuTA/6/
Câu trả lời cũ:
Tôi sẽ không loại bỏ điều này cho những người có thể bị lừa như tôi, lưu ý rằng việc sử dụng $evallà hoàn toàn tốt để làm điều đó, nhưng $parsecó một hành vi khác, có lẽ bạn sẽ không cần sử dụng nó trong hầu hết các trường hợp.
Cách để làm điều đó là, một lần nữa, sử dụng scope.$eval. Nó không chỉ biên dịch biểu thức góc, nó cũng có quyền truy cập vào các thuộc tính của phạm vi hiện tại.
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+ scope.$eval(attr.value));
}
});
function MyCtrl($scope) {
}
Những gì bạn đang thiếu là $eval.
http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval
Thực hiện biểu thức trên phạm vi hiện tại trả về kết quả. Bất kỳ trường hợp ngoại lệ trong biểu thức được tuyên truyền (chưa được phát hiện). Điều này rất hữu ích khi đánh giá các biểu thức góc.