Zugriff geordneten Bereichs in der Richtlinie, wenn controllerAs

Question

Ich habe derzeit eine Richtlinie, die ist mit Eigenschaften aus dem übergeordneten Controllers Umfang mit:

.controller('MainCtrl', function($scope) { 
    $scope.name = 'My Name'; 
}) 

.directive('myDirective', function() { 
    return { 
    scope: true, 
    controller: function($scope) { 
     console.log($scope.name); // logs 'My Name' 
    } 
    }; 
}) 

Jetzt bewege ich mich über zu controllerAs Syntax in meinem Controller, aber ich weiß nicht Ich weiß, wie ich einen Verweis auf das Controller-Objekt im Controller meiner Direktive bekomme.

.controller('MainCtrl', function() { 
    var vm = this; 
    vm.name = 'My Name'; 
}) 

.directive('myDirective', function() { 
    return { 
    scope: true, 
    controller: function($scope) { 
     console.log(vm.name); // logs 'Undefined' 
    } 
    }; 
}) 

Hier a plunkr das Problem veranschaulicht.

Ich fand auch , die versucht, etwas ähnliches zu erklären, aber in diesem Fall ist er nur den gleichen Controller wiederverwenden.

Answer 1

Wenn Sie die ControllerAs Syntax verwenden, wird eine Eigenschaft auf dem $scope Objekt erstellt, die ein Alias ​​ist auf Ihre Regler. zum Beispiel, ng-controller="MainCtrl as vm" gibt Ihnen $scope.vm. $scope ist im HTML enthalten, daher ist der Zugriff auf vm.name im HTML-Code derselbe wie der Zugriff auf $scope.vm.name in JavaScript.

In der Steuerung können Sie entweder auf this.name oder $scope.vm.name zugreifen, sie wären funktional gleichwertig. In andere Controller, würde this auf diesen spezifischen Controller beziehen, und somit this.name würde nicht funktionieren.

Daher können Sie in diesem Fall auf die gewünschte Eigenschaft im Controller der Direktive zugreifen, indem Sie verwenden. http://plnkr.co/edit/WTJy7LlB7VRJzwTGdFYs?p=preview

Sie werden jedoch wahrscheinlich auch die Syntax von ControllerAs mit der Anweisung verwenden wollen; In diesem Fall empfehle ich, anstatt vm für die Controller-Namen zu verwenden, einen eindeutigen Namen zu verwenden, mit dem Sie feststellen können, auf welchen Controller Sie sich beziehen. MainCtrl as main, und dann unter Bezugnahme auf main.name wird viel klarer.

Ich empfehle jedoch, einen isolieren Bereich zu verwenden, da es Ihnen ermöglicht, die Notwendigkeit, $scope in Ihre Richtlinien zu injizieren, vollständig zu beseitigen und Ihre Richtlinie in sich abgeschlossen und wiederverwendbar zu machen.

Seitennotiz, bindToController: true, tut nichts, wenn Sie kein isolieren Bereich verwenden; Wenn Sie mit einem isolieren Bereich verwenden, erstellt es Eigenschaften auf dem isolierten Controller, um den übergebenen Bereich zu entsprechen, so dass Sie auf die übergebenen Werte zugreifen können, ohne $scope zu benötigen.

Answer 2

Eine Möglichkeit besteht darin, die $scope Kette zu durchlaufen, bis Sie vm finden.

app.directive('myDir', function() { 
    return { 
    restrict: 'E', 
    scope: true, 
    template: '<div>my directive</div>', 
    bindToController: true, 
    controller: function($scope) { 
     console.log($scope.name2); // logs 'bound to the controller scope' 
     console.log($scope.$parent.vm.name); // logs 'bound to the controller vm' 
    } 
    }; 
}); 

Allerdings kann dies sehr spröde sein und es riecht ein bisschen nach.

Ein ausgefeilterer und durchdachterer Ansatz besteht darin, eine Eigenschaft des Bereichs Ihres Controllers über ein übergebenes Argument an Ihre Anweisung zu binden.

HTML:

<my-dir name="vm.name" /> 

JS:

app.directive('myDir', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     name: "=" 
    }, 
    template: '<div>my directive</div>', 
    bindToController: true, 
    controller: function($scope) { 
     console.log($scope.name); // logs 'bound to the controller vm' 
    } 
    }; 
}); 

Siehe plunkr