Wie neu zu laden-Direktive in AngularJS?

Ich versuche zu bauen, ein header-Richtlinie:

Wenn Sie angemeldet sind, angezeigt werden sollen, die den Benutzernamen und ein Log Out - Taste
Wenn Sie abgemeldet sind, sollten ausgeblendet werden die oben genannten Dinge

Ich bin mit einem benutzerdefinierten login-Dienst, erfasst diese Informationen und sendet die Ereignisse login und logout. Ich bin erfolgreich hören diese Ereignisse sowohl in der header-controller und der Richtlinie.

Wie kann ich ein reload der Richtlinie auf diese Ereignisse?

loginService.js:

angular.module("app")
    .service("loginService", ["$http", "$rootScope", function ($http, $rootScope) {
        var loggedIn = false,
            _username = "";

        this.logIn = function (username, password) {
            //do some validation...

            loggedIn = ...validation was successful;
            _username = username;

            if (loggedIn) {
                $rootScope.$broadcast("login");
            }
        };
        this.getUsername = function () {
            return _username;
        };
        this.isLoggedIn = function () {
            return loggedIn;
        };
        this.logOut = function () {
            loggedIn = false;
            $rootScope.$broadcast("logout");
        };
    }]);

headerController.js

angular.module("app")
    .controller("headerController", ["loginService", "$rootScope", "$location", function (loginService, $rootScope, $location) {
        this.isLoggedIn = loginService.isLoggedIn();
        this.username = "";

        $rootScope.$on("login", function (event) {
            this.isLoggedIn = loginService.isLoggedIn();
            this.username = loginService.getUsername();
        });

        this.logOut = function () {
            loginService.logOut();
            this.isLoggedIn = loginService.isLoggedIn();
            this.username = "";
            $location.path("/login"); //redirecting
        };
    }]);

header.html:

<header ng-controller="headerController as header">
    <span ng-if="header.isLoggedIn">{{header.username}} <button ng-click="header.logOut()">Log Out</button></span>
</header>

headerDirective.js

angular.module("app")
    .directive("header", function () {
        return {
            restrict: "A",
            transclude: false,
            templateUrl: "app/header/header.html",
            controller: "headerController",
            link: function (scope, element, attrs) {
                scope.$on("login", function (event) {
                    //show the ng-if in header.html??
                });
                scope.$on("logout", function (event) {
                    //hide the ng-if in header.html??
                });
            }
        };
    });

Ich bin mit diesem als <div header></div>.

sollte nicht die header-Richtlinie beschränkt sich auf restrict: "E" statt restrict: "A" da Sie es als ein element?
Du bist nicht wirklich mit der Richtlinie auf alle von dem, was ich kann sagen...die header element besteht in HTML5, und es wäre besser, zu vermeiden, verwirrend, sich einen Namen für euer element etwas anderes. Es ist gut, wenn es ein Attribut, aber es sollte anders benannt sein.
Ich fügte hinzu, beispielsweise die Nutzung als <div header></div>, sondern die Umbenennung für die Klarheit und die Nutzung dieser als ein element sind gute Ideen thx.

InformationsquelleAutor Ian Campbell | 2016-03-21

angularjs angularjs-directive

1

Wie es aussieht, gibt es einige grundlegende Probleme mit der Richtlinie, dass wird nicht zulassen, dass dies funktioniert:

1) Deklariert ein Attribut-Richtlinie:
Sie haben, erstellen Sie eine header-Attribut-Richtlinie: restrict: "A", aber Sie verwenden es als ein element der Richtlinie: <header ng-controller...</header>. restrict-Eigenschaft sollte restrict: "E". Oder Sie habe nicht verwendet die Richtlinie, wie andere kommentiert haben.

2) Transclude ist falsch
Sie haben festgelegt, zu transclude falsch, sondern Sie sind der Versuch, die Richtlinie mit Inhalt so transclude sollte wahr sein.

Um Ihr Problem zu lösen würde ich vorschlagen, dies als Lösung:
1. Erklären Sie Ihre header-Richtlinie im übergeordneten container anzeigen, wie gerade diese.
```
<ian-header></ian-header>
```
ianHeader.html
```
<header>
    <span ng-if="header.isLoggedIn">{{header.username}} <button ng-click="header.logOut()">Log Out</button></span>
</header>
```
ianHeader.js
```
angular.module("app")
    .directive("ianHeader", function () {
        return {
            restrict: "E",
            templateUrl: "app/header/ianHeader.html",
            link: function (scope, element, attrs) {
                scope.header = {isLoggedIn: false};
                scope.$on("login", function (event) {
                    //show the ng-if in header.html??
                    scope.header.isLoggedIn = true;
                });
                scope.$on("logout", function (event) {
                    //hide the ng-if in header.html??
                    scope.header.isLoggedIn = false;
                });
            }
        };
    });
```
Danke @Dr Jones! Mit restrict "E" und transclude: true wie du beschreibst mein Problem gelöst. Auch, machte ich eine klassische JavaScript-Fehler -- mit "this" innen-Verschlüsse... mit var self = this; statt gelöst, dass Problem. Eine andere Sache ist, dass das hören von Sendungen mit $on arbeitet sowohl in der Richtlinie und controller, so wählte ich zu diesem Zweck in den controller.

InformationsquelleAutor Gene

Wenn Sie bieten würde ein JS-snippet würde leichter sein, aber trotzdem ein Ansatz könnte sein:

angular.module("app")
    .directive("header", function () {
        return {
            restrict: "A",
            transclude: false,
            templateUrl: "app/header/header.html",
            controller: "headerController",
            link: function (scope, element, attrs) {
                scope.$on("login", function (event) 
                {
                  //header should be the controllerAs you declared
                  //If you would provide JS snippet would be easier to debbug
                  scope.$parent.header.isLoggedIn= true;
                    //show the ng-if in header.html??
                });
                scope.$on("logout", function (event) 
                {
                   scope.$parent.header.isLoggedIn = false;
                    //hide the ng-if in header.html??
                });
            }
        };
    });

InformationsquelleAutor Bettimms

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.