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

【问题标题】：angularjs ng-include and angularjs custom directive dont't want work togetherangularjs ng-include 和 angularjs 自定义指令不想一起工作
【发布时间】：2015-11-17 17:53:25
【问题描述】：

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

首先，当使用此功能按下登录按钮时，我尝试为包含 html 绑定 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>

【问题讨论】：

标签： javascript html angularjs

【解决方案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

【讨论】：