CODEWITHSUNDEEP
javascripthtmlangularjs
Edgaras Karka
Edgaras Karka

Reputation: 7852

angularjs ng-include and angularjs custom directive dont't want work together

I have angualrjs app and I use login box as popup box. Now all html code of login box is loaded with main html code (work correct), but my goal is get login box html when login button is clicked (for save user resources). I try it do with ng-include. It`s work correct but only one time, if I try click login button again after close login box nothing happens.

First I try bind href for include html when login button is pressed using this function:

$scope.toggleLogInForm = function(){

    if(typeof $scope.htmlTemplates.LoginPopupHtml === 'undefined'){
        $scope.htmlTemplates.LoginPopupHtml =  urlSer.url+'html/getLoginPopupHtml';
    }

    $scope.showLogin = true;
    console.log($scope.showLogin); // print true when press login button
}

element with ng-include atrribute for store html.

<div ng-include src="htmlTemplates.LoginPopupHtml"></div>

directive for control hide/show login box:

webApp.directive('regmodal', function () {
return {
  template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
        '<div class="">' + 
          '<div class="" ng-transclude></div>' + 
        '</div>' + 
      '</div>' + 
    '</div>',
  restrict: 'E',
  transclude: true,
  replace:true,
  scope:true,
  link: function postLink(scope, element, attrs) {
    scope.title = attrs.title;
    scope.$watch(attrs.visible, function(value){
      if(value == true)
        $(element).modal('show');
      else
        $(element).modal('hide');
    });

    $(element).on('shown.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = true;
      });
    });

    $(element).on('hidden.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = false;
      });
    });
  }
};
});

And finally my html login html code :

<regmodal  class="form-login-heading" title="Registration" visible="showLogin">     
        <form class="form-login geform" ng-submit="login()">
        ... // skiped not important for example
        </form>
</regmodal>

Upvotes: 3

Views: 458

Answers (1)

Arun
Arun

Reputation: 1185

You have to use watch function like in controller

mymodal.controller('MainCtrl', function ($scope) {
    $scope.modalObj = { showModal : false };
    $scope.toggleModal = function(){
        $scope.modalObj.showModal = !$scope.modalObj.showModal;
    };
  });

in directive

scope.$watch(function () { return scope.modalObj.showModal; }, function(value){
    if(value == true)
      $(element).modal('show');
    else
      $(element).modal('hide');
});

check this one: angularjs - custom directive in ng-include not working

Upvotes: 3

Related Questions