[英]How to raise an event in Angular 1.5 Component
我在應用程序中使用Angular 1.5 Component。 我有一個用於配置路由的根組件:
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" ] }
]
});
my-App
組件中還有一個名為login-partial
組件,用於顯示注銷菜單的登錄信息:
<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
):
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);
});
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.