Question

我正在尝试创建一个服务，它将采用模板和控制器，将两者结合起来，然后将它们发送到前端框架以注入DOM。该服务允许我在应用程序中随时注入模态。

模态的实际注入已由uikit（bootstrap like framework）处理。所以问题只是如何将控制器/范围绑定到视图部分模板。它看起来像这样：

angular.module('user', ['modal'])
.controller('userCtrl', userCtrl)
.controller('userModalCtrl', userModalCtrl);

function userCtrl(modal){
  var uc = this;
  var modalConf = {
    templateUrl: 'components/user/tmpl/profilemodal.tpl.html',
    controller: 'userModalCtrl',
    controllerAs: 'um'
  }
  uc.openModal = modal.confirm(modalConf);
}

function userModalCtrl(){
  var um = this;
  um.user = {
    name: 'John doe',
    email: 'john.doe@example.com'
  }
}

通常我会使用一个指令，但在这种情况下，我不想事先在应用程序视图中添加任何标记。如果我可以通过编程方式调用指令，也许可以解决问题。

我已经能够调用模板，并将它正确注入DOM中。问题是......如何将控制器绑定到它？

angular.module('modal', [])
.factory('modal', modalSrv);

function modalSrv($templateRequest, ukModal){
  var service = {};
  service.confirm = function (content, callback) {
    $templateRequest(content).then(function(data){
      new ukModal.confirm(data, callback);
    });
  };
  return service;
}

此服务将正确收集content中引用的HTML模板，然后将其发送给ukModal（.confirm指定一种模式），然后将其注入DOM。问题是..如何将控制器/范围绑定到此模板，然后再将其发送给ukModal？

Answer 1

你不需要做指令的工作，即使有其他符合Angular的方法也可以。

app.directive('modal', function () {
  return {
    templateUrl: 'components/user/tmpl/profilemodal.tpl.html',
    controller: 'userModalCtrl',
    controllerAs: 'um'
  };
});

和

var modalElement = $compile('<modal>')($scope);
var modal = new ukModal.confirm(modalElement , callback);

这里最明显的问题是$scope应该是实际父母的范围。如果不是，请确保指令不以任何方式依赖它，您甚至可以传递空对象而不是$scope。

不太明显的问题是内存泄漏。留意他们。与分离节点一起使用的非ng代码易于泄漏。

结合模板与控制器

1 个答案: