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

Edgaras Karka 发表于 Dev

埃德加·卡尔卡（Edgar Karka）

我有angualrjs应用，我使用登录框作为弹出框。现在，登录框的所有html代码都加载了主要的html代码（可以正常工作），但是我的目标是单击登录按钮时获取登录框html（以节省用户资源）。我尝试用ng-include来做。它的工作正常，但是只有一次，如果我尝试在关闭登录框后再次单击登录按钮，则什么也没有发生。

首先，当使用此功能按下登录按钮时，我尝试为包含HTML的bind href：

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

阿伦

您必须使用控制器中的监视功能

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-ng-include中的自定义指令不起作用

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。