Я использую компонент 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, не поддерживает события.
Возможно ли это с компонентами? Любое предложение о том, как можно было бы это сделать?
Я решил проблему с помощью $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);
});
};
$scope
в контроллере.