Зауважте: я актуалізую цю відповідь, коли знаходжу кращі рішення. Я також зберігаю старі відповіді для подальшого використання, поки вони залишаються пов'язаними. Остання і найкраща відповідь спочатку.
Краща відповідь:
Директиви в angularjs дуже потужні, але потрібно зрозуміти, які процеси стоять за ними.
Створюючи директиви, angularjs дозволяє створювати ізольований діапазон з деякими прив’язками до батьківської області. Ці прив'язки задаються з допомогою атрибута прикріпити елемент в DOM і як визначити області видимості властивості в об'єкті директиви визначення .
Існує 3 типи параметрів прив'язки, які можна визначити за обсягом, і ви записуєте їх як атрибут, пов’язаний з префіксами.
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>
У цьому випадку ми можемо отримати доступ до таких властивостей у межах директиви (будь то у функції зв’язку чи контролера):
/* 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 .
Відповідь "Ще добре":
Оскільки ця відповідь була прийнята, але є деякі проблеми, я збираюся її оновити на кращу. Мабуть, $parseце послуга, яка не лежить у властивостях поточного обсягу, а значить, вона приймає лише кутові вирази і не може досягти обсягу.
{{, }}вирази складаються під час ініціювання angularjs, що означає, що коли ми намагаємося отримати доступ до них у нашому postlinkметоді директив , вони вже складені. ( {{1+1}}вже 2в директиві).
Ось як би ви хотіли використовувати:
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>
Одне, що ви повинні помітити тут, це те, що якщо ви хочете встановити рядок значення, вам слід загорнути його в лапки. (Див. Третій вхід)
Ось ця загадка, з якою можна грати: http://jsfiddle.net/neuTA/6/
Стара відповідь:
Я не знімаю цього для людей, яких можна ввести в оману, як я, зауважте, що використання $evalідеально правильний спосіб зробити це, але$parse це інша поведінка, вам, мабуть, це не знадобиться для використання в більшості випадків.
Спосіб зробити це - ще раз, використовуючи scope.$eval. Він не тільки компілює кутовий вираз, він також має доступ до властивостей поточного діапазону.
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+ scope.$eval(attr.value));
}
});
function MyCtrl($scope) {
}
Те, що вам не вистачає, було $eval.
http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval
Виконує вираз на поточній області, повертаючи результат. Будь-які винятки в виразі поширюються (uncaught). Це корисно при оцінці кутових виразів.