将AngularJS指令作为属性添加到动态添加的元素

Question

当我尝试通过$compile方法将指令作为元素追加时，下面的代码工作正常

restrict: "A",
    link: function(scope, elem, attrs) {
        $reader.$().$call = function(bookDefaults) {
                var PageFrames = angular.element(document.getElementById(frameSelector)).children();
                _.each(PageFrames, function(frame) {
                    var iframeParent = angular.element(frame);
                    iframeParent.append($compile("<iframe-binder></iframe-binder>")(scope));
                });
        };
    }

但是以下内容没有启动[ 我正在尝试将指令作为属性添加到动态创建的元素 ]：

restrict: "A",
    link: function(scope, elem, attrs) {
        console.log(elem.parent());
        $reader.$().$call = function(bookDefaults) {                
                var PageFrames = angular.element(document.getElementById(frameSelector)).children();
                _.each(PageFrames, function(frame) {
                    var iframe = angular.element(frame).find('iframe');
                    $compile(iframe.attr("iframe-binder", ""))(scope);
                });
        };
    }

在第二个代码中，当我检查DOM树时似乎添加了属性，但指令 iframe-binder 不会运行。

iframe-Binder指令：

.directive("iframeBinder", [function() {
    return {
        restrict: "AE",
        link: function(scope, elem, attrs) {
            console.log(elem);
        }
    };
}]);

这是正确的做法还是我在这里做错了什么？