Question

我有angualrjs应用程序，我使用登录框作为弹出框。现在登录框的所有html代码都加载了主html代码（工作正确），但我的目标是在单击登录按钮时获取登录框html（用于保存用户资源）。我试着用ng-include做。它的工作正确，但只有一次，如果我在关闭登录框后再次单击登录按钮没有任何反应。

首先，当使用此函数按下登录按钮时，我尝试使用include href绑定html：

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

带有ng-include atrribute for store html的

元素。

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

控制隐藏/显示登录框的

指令：

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

最后我的html登录html代码：

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

Answer 1

你必须使用像手表这样的功能在控制器

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

指令

中的

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

检查一下： angularjs - custom directive in ng-include not working

angularjs ng-include和angularjs自定义指令不希望一起工作

1 个答案: