Обратите внимание: я обновляю этот ответ, так как нахожу лучшие решения. Я также сохраняю старые ответы для дальнейшего использования, пока они остаются связанными. Последний и лучший ответ приходит первым.
Лучший ответ:
Директивы в 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>
Здесь вы должны заметить одну вещь: если вы хотите установить строку значения, вы должны заключить ее в кавычки. (См 3-й вход)
Вот скрипка для игры: 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). Это полезно при оценке угловых выражений.