Question

标题中有几个链接。但pop-up嵌套在另一个控制器下。我在这里使用pop-up的服务电话。

点击标题链接，如何打开嵌套在另一个控制器中的pop-up。

我需要根据用户点击的链接更新pop-up的内容。为此，我包括了html（使用ng-include）

这是我的代码和演示：

var app = angular.module('myApp', []);

  app.service('modalService', function() {
      this.width  = 100;
      this.height  = 100;
  });

  app.directive('modalDialog', function(modalService) {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with the template below
    transclude: true,
    link: function(scope, element, attrs) {


    },
    templateUrl: "modal.html"
  };
});

app.controller('MyCtrl', ['$scope',  function($scope, modalService) {
  $scope.modalShown = false;
}]); 

app.controller('header', ['$scope', 'modalService', function($scope, modalService) {

  $scope.modalShown = false;

  $scope.toggleModal = function(link) {
    console.log(link);
    $scope.linkInfo = link+'.html';
    $scope.modalShown = !$scope.modalShown;
  };

}]);

Live demo

如果我做错的方式，请纠正我。目前功能是呼叫和gettting控制台。但弹出窗口没有打开适当的内容。

Answer 1

您可以使用angular-UI库angular-ui#modal

的模态服务

如果您想创建简单的内容，则必须通过以下方式更改代码：

我建议使用ngIf来显示/隐藏你的modalDialog指令。有了它，它将在表达式变得真实时呈现，并且每次都可以获得正确的模板。

不要转换，因为您没有静态模板。您必须在运行时编译模板（使用$ compile服务）。还要为该模板创建一个新范围。

app.directive('modalDialog', function(modalService, $rootScope, $compile, $templateCache) {
  return {
    restrict: 'E',
    scope: {
      show: '=',
      templateUrl: '='
    },
    link: function(scope, element, attrs) {
      var template = $templateCache.get(scope.templateUrl);
      var modalScope = $rootScope.$new();
      var modalElement = angular.element(template);

      element.append(modalElement);
      $compile(modalElement)(modalScope);

    },
    templateUrl: "modal.html"
  };
});

请注意，仍有问题。将模态放置到DOM中的任意位置可能不起作用（并非所有浏览器在使用定位时都表现正常）。因此，我建议创建一个服务，该服务将附加并在元素下方呈现模态。

如何使用服务从头控制器打开`模态窗口`到主控制器？

1 个答案: