從外部修改指令屬性

Question

所以，我有一個問題，我不確定如何問。我有一個屬性，我通過auth0庫（代碼如下）在指令的控制器中設置。我需要從另一個應用程序控制器修改該屬性。

具體來說，用例是在登錄/註銷周圍。當用戶登錄後，他們點擊註銷按鈕，我可以設置屬性的值，而不是問題。但是，當他們沒有登錄，並且他們登錄時，我無法在登錄控制器的指令中設置該屬性。

指令：

angular 
    .module('app') 
    .directive('loginLogout', loginLogout); 

    function loginLogout() { 
    var directive = { 
     ... 
     scope: { 
      loggedin: '=' 
     }, 
     controller: loginLogoutController, 
     controllerAs: 'vm', 
     bindToController: true 
    }; 

    return directive; 

    function loginLogoutController(auth,store,$location,toastr,$parse) { 
     var vm = this; 
     vm.logout = logUserOut; 
     vm.loggedin = auth.isAuthenticated; 

     function logUserOut() { 
     auth.signout(); 
     ... 
     vm.loggedin = false; 
     } 
    } 
    } 

登錄控制器： （略）

function LoginController(auth, store, $location, toastr) { 
    var vm = this; 

    vm.login = function() { 
     auth.signin({}, loginSuccess, loginFailure); 
     function loginSuccess(profile, token){ 
     ... 
     // ========== I want to set the value of vm.loggedin from the directive here. 
     } 
     function loginFailure(){ 
     ... 
     } 
    }; 
    } 

我已經試過的東西像$解析，並與該指令配置的隔離設置範圍修修補補。沒有運氣。任何幫助表示讚賞。

Answer 1

您可以嘗試使用$ rootScope。$ broadcast和$ scope。$ on進行此類通信。

您已經使用了controllerAs來避免注入$ scope。當然這需要在控制器中注入$ scope。但是，在這種特定情況下（即使用controllerAs時）使用$ scope可能並不是那麼糟糕的想法（https://github.com/toddmotto/angularjs-styleguide）。

Login Controller: 

function LoginController(auth, store, $location, toastr) { 
var vm = this; 

vm.login = function() { 
    auth.signin({}, loginSuccess, loginFailure); 
    function loginSuccess(profile, token){ 
    ... 
    // ========== I want to set the value of vm.loggedin from the directive here. 
    $rootScope.$broadcast('loginCheck'); 
    } 
    function loginFailure(){ 
    ... 
    } 
}; 

}

指令

function loginLogoutController(auth,store,$location,toastr,$parse) { 
    var vm = this; 
    vm.logout = logUserOut; 
    vm.loggedin = auth.isAuthenticated; 

    function logUserOut() { 
    auth.signout(); 
    ... 
    vm.loggedin = false; 
    } 

$scope.$on('loginCheck', function(event, args) { 

    // Set vm.loggedin 
}); 
} 

Answer 2

我現在能想到的，你可以使用angular.js函數綁定。

.directive('loginLogout', loginLogout); 

    function loginLogout() { 
    var directive = { 
     ... 
     scope: { 
      loggedin: '=', 
      confirmAction: '&' 
     }, 
     controller: loginLogoutController, 
     controllerAs: 'vm', 
     bindToController: true 
    }; 

<!--In html--> 
<login-logout confirm-action="doSomething()"> </login-logout> 

function LoginController(auth, store, $location, toastr) { 
    var vm = this; 

    vm.login = function() { 
     auth.signin({}, loginSuccess, loginFailure); 
     function loginSuccess(profile, token){ 
     ... 
     // call doSomething here 
     doSomething() 
     } 
     function loginFailure(){ 
     ... 
     } 
    }; 
    }