javascript - 将模板与 Controller 结合起来

Question

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

模态的实际注入(inject)已经由 uikit(类似 Bootstrap 的框架)处理。所以问题只是如何将 Controller /范围绑定(bind)到 View 部分模板。它看起来像这样:

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'
  }
}

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

我已经能够调用模板，并将其正确地注入(inject)到 DOM 中......问题是......我如何将 Controller 绑定(bind)到它？

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 指定模态类型)，然后将其注入(inject) DOM 中。问题是..在将 Controller /范围发送到 ukModal 之前，如何将其绑定(bind)到该模板？

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 代码与分离节点结合使用很容易泄漏。