Angular hide dirrective je nach Aktion in einer anderen Richtlinie

Ich bin neu in eckigen und ich bin auf der Suche nach dem besten Weg zu tun, was ich will.Angular hide dirrective je nach Aktion in einer anderen Richtlinie

In meiner Hauptseite habe ich 2 Direktiven, eine wird verwendet, um eine Schaltfläche anzuzeigen (und vielleicht andere Sachen). Und ein anderes verwendet, um eine Art Dialogfeld/Menü anzuzeigen.

Jede Direktive hat ihren eigenen Controller.

Ich möchte die zweite Direktive ein- oder ausblenden, wenn ich auf die Schaltfläche in der ersten klicke.

Ich weiß nicht wirklich, was Waren oder falsche Ansätze sind. Sollte ich einen Service verwenden, der in beide Controller injiziert wird, und eine Variable mit ng-show in der zweiten Direktive setzen? Diese Lösung verdeckt die Direktive nicht wirklich, weil ich ein div in der Direktive brauche, um den Inhalt zu verbergen und nicht zu viel, um einen Dienst nur für einen Boolean zu benutzen?

Sollte ich eine Art globale Variable (rootscope?) Verwenden oder den ersten Controller in den zweiten injizieren?

Oder vielleicht einen dritten Controller auf meiner Hauptseite verwenden (mit einem Service verwendet?) Oder verwenden Sie nur einen Controller für beide Richtlinie?

Ohne Direktive würde ich wahrscheinlich nur einen Hauptcontroller für meine ganze Seite verwenden und eine Variable setzen.

Quelle

2016-06-09 dufaux

ich wahrscheinlich für die Richtlinie keinen Zweiweg verbindlich wäre die eine Schaltfläche mit einem Modell zeigt Eigenschaft auf dem Controller-Bereich, den Sie für Ihre Hauptseite verwenden (normalerweise, was auch immer mit ng-app gehandhabt wird. Diese Modelleigenschaft könnte dann der anderen Direktive auf Ihrer Hauptseite angehängt werden (zB ng-show = model.property) – TSmith

In der Tat ist die erste Direktive nur eine Art Knopf, um "etwas" anzuzeigen, und die zweite Direktive nur eine Art Popup, die darauf wartet, dass ein Boolean angezeigt wird. Aus diesem Grund habe ich schließlich einen Dienst verwendet, der einen Boolean mit einem Getter und einem Setter enthält, um jede Interaktion zwischen beiden Controllern zu vermeiden.

Meine beiden Controller verwenden diesen Dienst, der erste, um den Wert zu setzen, wenn wir auf das Element klicken und der zweite Controller bieten nur eine Sichtbarkeit auf dem Getter für meine ng-Show.

Ich weiß nicht, ob es der beste Weg ist, aber ich bin jetzt zufrieden.

Kleines Beispiel hier (ohne Richtlinie, sondern mit derselben Logik): http://codepen.io/dufaux/pen/dXMrPm

angular.module('myModule', []); 

angular.module("myModule") 
    .controller("ButtonCtrl", buttonCtrl) 
    .controller("PopUpCtrl", popUpCtrl) 
    .service("DisplayerService", displayerService); 

//ButtonCtrl 
buttonCtrl.$inject = ["DisplayerService", "$scope"]; 
function buttonCtrl(DisplayerService, $scope) { 
    var vm = this; 
    vm.display = function(){ 
    DisplayerService.setDisplay(!DisplayerService.getDisplay()); 
    } 
} 

//PopUpCtrl 
popUpCtrl.$inject = ["DisplayerService"]; 
function popUpCtrl(DisplayerService) { 
    var vm = this; 

    vm.displayable = function(){ 
    return DisplayerService.getDisplay(); 
    } 
} 

//Service 
function displayerService(){ 
    var vm = this; 
    vm.display = false; 

    vm.setDisplay = function(value){ 
    vm.display = value; 
    } 

    vm.getDisplay = function(){ 
    return vm.display; 
    } 
}

<body data-ng-app="myModule"> 
    <div data-ng-controller="ButtonCtrl as btnCtrl" > 
     <button data-ng-click="btnCtrl.display()"> 
     display 
     </button> 
    </div> 
    [...] 
    <div data-ng-controller="PopUpCtrl as popUpCtrl" > 
     <div data-ng-show="popUpCtrl.displayable()"> 
     hello world 
     </div> 
    </div> 
</body>

Quelle

2016-06-14 16:06:19 dufaux

Angular hide dirrective je nach Aktion in einer anderen Richtlinie

Antwort

Verwandte Themen