CODEWITHSUNDEEP
angularjsangularjs-directive
Aaron Wagner
Aaron Wagner

Reputation: 317

Modifying directive property from outside

So, I have a question that I am unsure of how to even ask. I have a property that I am setting in a directive's controller by an auth0 library (code to follow). I need to modify that property from another app controller.

Specifically, the use case is around being logged in/logged out. When the user is logged in, and they click the logout button, I can set the value of the property, not a problem. But when they are not logged in, and they log in, I can't set that property in the directive from the login controller.

Directive: 

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;
      }
    }
  }

Login Controller: (abbreviated)

  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(){
        ...
      }
    };
  }

I have tried things like $parse, and setting tinkering with the isolated scope on the directive config. No luck. Any help is appreciated.

Upvotes: 0

Views: 78

Answers (2)

Bharat
Bharat

Reputation: 943

You could try using $rootScope.$broadcast and $scope.$on for such communication.

You have used controllerAs to avoid injecting $scope. Ofcourse this would need injecting $scope in controller. However using $scope in such specific cases (that is when controllerAs is used) may not be all that bad idea (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(){
    ...
  }
};

}

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;
  }

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

  // Set vm.loggedin
});
}

Upvotes: 1

xdeepakv
xdeepakv

Reputation: 8125

What i can think of now, You can use angular.js function binding.

.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(){
        ...
      }
    };
  }

Upvotes: 0

Related Questions