Question

我正在建立一个Modal工厂，并且在$compile的问题上不断受到重创。我正在尝试使用工厂向页面动态添加Modal指令。

该指令本身具有一些内部逻辑，允许它通过API服务发布。它将自己注册到postLink中的pub / sub服务，如下所示：

postLink: function(scope, element, attrs) {

  api.subscribe(attrs.id, function(msg) {
    //magic happens here
   });
}

工厂创建并附加指令如下：

angular.module('modal')
  .factory('ModalFactory', ['$compile', '$rootScope', 'Api', function($compile, $rootScope, api) {
    return function modalFactory(config) {
      var scope, element, html, id;

      init(); //run init so it's initialized on creation

      function activate() {
        api.publish(id, 'activate');
      }

      function init() {
        //checks if initialized already
        //uses assembleDirective to get the html string and scope

        angular.element(document.body).append($compile(html)(scope)); //this is the important line of code
      }


     function assembleDirective() {
      //an html string is assembled here and stored into html. uses html from config

      //rootscope is used to create a new scope (unless provided in config) 
     }     

      return {
        activate: activate,
        deactivate: deactivate
      }
    }

}]);

这是问题，每当我在控制器中运行这个逻辑时，就像这样：

//imagine we're in a controller
var myModal = new ModalFactory({ }); //create empty modal
myModal.activate(); //fails

问题？当我运行myModal.activate()时，由于某种原因，该指令还没有运行任何内部链接逻辑。我在控制台上记录了进程，并且在指令本身运行链接之前运行了activate方法。这让我大吃一惊，因为我以为我刚编译它并添加到DOM（当我想到编译时，我正在考虑运行前/后链接功能）

当我控制记录$compile(html)(scope)时，它返回一个jQLite元素，其中所有编译，这让我觉得它正常工作。但是，当我从jQLite对象中获取实际的DOM时（通过最后只做[0]），我获得了原始HTML字符串的DOM表示，未编译。

当我将一个单独的方法附加到单击时运行myModal.activate()的控制器时，该指令已经运行了其链接方法并且模式被激活。

Answer 1

我相信你的问题是用Angulars内部构件在DOM螺丝周围移动角元素。做你正在做的事情的安全方法是首先附加它，然后编译。两者之间的时间间隔很小。如果你改变这样的代码，你会遇到问题吗？

  function init() {
    //checks if initialized already
    //uses assembleDirective to get the html string and scope
    var modalElt = angular.element(document.body).append(html);
    $compile(modalElt)(scope);
  }

也许请查看Brian Ford的角度模态代码：

https://github.com/btford/angular-modal/blob/master/modal.js

查找$ compile

的行

Answer 2

对于任何仔细阅读这个问题的人，我终于想出了答案，彼得的建议首先得到了极大的帮助（在附加元素之后进行编译）。

我最终做的是在编译之前在范围上设置属性。该属性在postLink中的模态中触发了init函数，因此$compile的异步性质最终无关紧要。

如何通过工厂创建/编译指令？

2 个答案: