Как создать событие в Angular 1.5 Component

0

Я использую компонент Angular 1.5 в своем приложении. У меня есть корневой компонент для настройки моих маршрутов:

module.component("myApp", {
    templateUrl: "/app/components/my-app.component.html",
    $routeConfig: [
        { path: "/list", component: "myList", name: "List" },
        { path: "/login", component: "login", name: "Login" },
        { path: "/**", redirectTo: [ "List" ] }
    ]
});

У меня также есть компонент, называемый частью login-partial в компоненте my-App для отображения входа в систему для выхода из системы:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#/login">Login</a>
        </li>
    </ul>
</div><!--/.nav-collapse -->

Теперь в моем login-conponent контроллер Я хочу изменить login-partial шаблон (изменение login элемент для logout из logout):

function loginController(account, $location) {
    var model = this;
    var onComplete = function (data) {
        if (data === "ok") {
            $location.url('/list');
        }
    };
    model.login = function (userName, password) {
        account.login(userName, password)
            .then(onComplete, onError);
    };
};
module.component("login", {
    templateUrl: "/app/components/login.component.html",
    controllerAs: "model",
    controller: ["account", "toaster", "$location", loginController]
});

С директивами мы можем поднять событие, используя $scope.$emit() and $scope.$on(). Но, насколько я знаю, новый компонент, введенный в Angular 1.5, не поддерживает события.

Возможно ли это с компонентами? Любое предложение о том, как можно было бы это сделать?

  • 1
    Компонент представляет собой тонкое сахарное покрытие вокруг директивы. Он может выполнять те же действия, что и директива, и не препятствует использованию $scope в контроллере.
Теги:

1 ответ

0
Лучший ответ

Я решил проблему с помощью $rootScope и отправил событие из loginController:

function loginController(account, toaster, $location, $rootScope) {
    var model = this;

    var onComplete = function (data) {
        if (data === "ok") {
            $rootScope.$emit('success', { data: true });
            $location.url('/list');
        }
        // other code
    };
    var onError = function (reason) {
        // other code
    };

    model.login = function (userName, password) {
        account.login(userName, password)
            .then(onComplete, onError);
    };

};

Затем внутри partialLoginController я слушаю это событие:

function partialLoginController($rootScope) {
    var model = this;
    model.isLoggedIn = false;

    $rootScope.$on('success', function (event, args) {
        model.isLoggedIn = args.data;
        console.log(args.data);
    }); 
};

Ещё вопросы

Сообщество Overcoder
Наверх
Меню