Hinweis: Ich aktualisiere diese Antwort, wenn ich bessere Lösungen finde. Ich behalte die alten Antworten auch zum späteren Nachschlagen, solange sie verwandt bleiben. Die neueste und beste Antwort steht an erster Stelle.
Bessere Antwort:
Direktiven in Angularjs sind sehr mächtig, aber es braucht Zeit, um zu verstehen, welche Prozesse dahinter stehen.
Während Sie Direktiven erstellen, können Sie mit anglejs einen isolierten Bereich mit einigen Bindungen an den übergeordneten Bereich erstellen . Diese Bindungen werden durch das Attribut angegeben, mit dem Sie das Element in DOM anhängen, und wie Sie die Eigenschaft scope im Direktivendefinitionsobjekt definieren .
Es gibt drei Arten von Bindungsoptionen, die Sie im Bereich definieren können und die Sie als Präfix-bezogene Attribute schreiben.
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>
In diesem Fall können wir im Rahmen der Direktive (unabhängig davon, ob es sich um eine Verknüpfungsfunktion oder eine Steuerung handelt) auf folgende Eigenschaften zugreifen:
/* 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 .
"Immer noch OK" Antwort:
Da diese Antwort akzeptiert wurde, aber einige Probleme hat, werde ich sie auf eine bessere aktualisieren. Anscheinend $parse
handelt es sich um einen Dienst, der nicht in den Eigenschaften des aktuellen Bereichs liegt, was bedeutet, dass er nur Winkelausdrücke akzeptiert und den Bereich nicht erreichen kann.
{{
, }}
Ausdrücke werden kompiliert, während anglejs initiiert. Wenn wir also versuchen, in unserer Direktivenmethode auf sie zuzugreifen postlink
, sind sie bereits kompiliert. ( {{1+1}}
ist bereits 2
in der Richtlinie).
So möchten Sie Folgendes verwenden:
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>
Eine Sache, die Sie hier beachten sollten, ist, dass Sie die Wertzeichenfolge in Anführungszeichen setzen sollten, wenn Sie sie festlegen möchten. (Siehe 3. Eingang)
Hier ist die Geige zum Spielen: http://jsfiddle.net/neuTA/6/
Alte Antwort:
Ich entferne dies nicht für Leute, die wie ich irregeführt werden können. Beachten Sie, dass die Verwendung $eval
vollkommen in Ordnung ist, aber $parse
ein anderes Verhalten aufweist. In den meisten Fällen benötigen Sie dies wahrscheinlich nicht.
Der Weg, dies zu tun, ist wieder einmal mit scope.$eval
. Es kompiliert nicht nur den Winkelausdruck, sondern hat auch Zugriff auf die Eigenschaften des aktuellen Bereichs.
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+ scope.$eval(attr.value));
}
});
function MyCtrl($scope) {
}
Was Sie vermissen war $eval
.
http://docs.angularjs.org/api/ng.$rootScope.Scope#$eval
Führt den Ausdruck im aktuellen Bereich aus und gibt das Ergebnis zurück. Alle Ausnahmen im Ausdruck werden weitergegeben (nicht erfasst). Dies ist nützlich, wenn Winkelausdrücke ausgewertet werden.