使用所需的控制器进行角度$编译

我有一个复合列表指令 - 也就是 - 列表项可以是一个列表本身。
父指令定义控制器：

.directive('parent', function() { 
    controller: function($scope) { 
    }, 
    link: function (scope, element, attrs) { 
    } 
})

列表（项目）要求将父控制器，它本身工作正常（为什么不要呢..）：

.directive('list', function() { 
    require: '^parent', 
    link: function (scope, element, attrs, parentCtrl) { 
    } 
    })

同云以及为具体项目，这也是罚款：

.directive('item', function() { 
    require: '^parent', 
    link: function (scope, element, attrs, parentCtrl) { 
    } 
})

项目可以在这种情况下，它创建了一个“清单”自己的复合。此组成由完成$编译（荷兰国际集团）的链接功能内列表项：

link: function (scope, element, attrs, parentCtrl) { 
     ... 
     $compile("<list></list>")(scope) 
     ... 
}

会抛出一个异常：
控制器“父”，由指令“清单”要求，不能被发现！

原因很明显 - $编译函数没有提供控制器，因此“父”的要求无法解决。
所以，我已经试过手动提供控制器：

$compile("<list></list>")(scope, null, {'parent': parentCtrl});

这并不抛出异常，但仍然需要时不提供此控制器。

任何想法如何使$ compile函数接受外部控制器，这也应该被评估？

来源

2014-02-18 Tomer

以供将来参考，这里是解决方案：

在$编译功能所需的控制器可作为transcluded控制器进行传递：

$compile(template)(scope, undefined, {transcludeControllers: injectedCtrl})

其中“injectCtrl”是指令期望列出控制器的对象，例如，如果require: '^dad'，那么transcludeControllers这个样子的：

transcludeControllers: { 
     dad: { //name of controller in 'require' statement 
      instance: vm //instance of controller 
     } 
     }

见这个例子：https://jsfiddle.net/qq4gqn6t/11/

完蛋了！

来源

2015-02-10 16:32:15 Tomer

嗨，你有一个工作plunkr什么的？我试图做同样的事情，但注入Ctrl不能达到子项目模板... –

这个答案的作品，但不完整...看看这个jsfiddle：http://stackoverflow.com/questions/34849645 /如何使用 - transcludecontrollers功能于angularjs – tsiorn

我刚刚有一个类似的问题，并且解决方案似乎是首先将元素添加到父级，然后编译它。

.directive('item', function($compile) { 
    return { 
    template:'<li><a ng-click="addSubList()">Create Another List</a></li>', 
    require: '^parent', 
    replace: true, 
    link: function(scope, element, attrs, parentCtrl) { 

     scope.addSubList = function() { 
     var sublist = angular.element('<ul list>'); 
     element.find('a').append(sublist); 
     $compile(sublist)(scope); 
     }; 

    } 
    }; 
});

看到这个Plunker：http://plnkr.co/edit/dASASrFbtXSMCRZKRAj5?p=preview

来源

2014-03-22 21:33:32 lpiepiora

你介意分享“其他”解决方案吗？ :) –

@lpiepiora非常感谢！有完全相同的问题，我甚至没有意识到我可以追加未编译的节点，然后让角编译它！ –

注意我未来的自我：请记住，要编译的主题必须首先在angular.element中“包装”。传递原始html时首先编译然后附加，但不是其他方式。 – migajek

-3

$compile(angular.element("< list></list>"))(scope)

来源

2016-04-14 09:06:35 Zhu

使用所需的控制器进行角度$编译

回答

相关问题