javascript - angularjs ng-include 和 angularjs 自定义指令不想一起工作

Question

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

首先，当使用此功能按下登录按钮时，我尝试绑定(bind) 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 商店 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

你必须使用 watch 函数，比如在 Controller 中

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