需要Angular方面的帮助，并在没有模板的情况下隔离作用域和指令

Question

我正在尝试以下场景，但没有成功(使用angular 1.4.7)，并希望得到一些关于如何进行的指点。我有以下HTML(简化)作为Angular视图(并使用$route等)

pagedListController包含一个函数'selectStuff($event)'。

<div ng-controller="domainController as pageCtrl">
    <div paged-list api="pageCtrl.api">
        <button ng-click="pgList.selectStuff($event)"></button>
    </div>
</div>

和下列

的指令(再次简化)

app.directive('pagedList', function() {
   return {
       restrict: 'A',
       scope: {},
       bindToController: {
          api: '='
       },
       controller: 'pagedListController',
       controllerAs: 'pgList',
       compile: function(tElem, tAttrs, transcludeFn) {
           function linkFn(scope, element, attrs, controller, transcludeFn) {
               transcludeFn(scope, function(clone, scope) {
                   element.append(clone);
               }
           }
           return linkFn;
       }
   };

})

问题:虽然'api'绑定正确，但page -list指令内容中对pgList的引用从未真正调用selectStuff()。我不能对我的生活为什么不理解。我已经浏览了angular文档和几十个博客和其他帖子，只是没有看到什么问题。有什么建议吗?

Answer 1

回答我自己的问题:

上面的原始演示实际上有一个错误，造成了所有的差异，我把它写成

function linkFn(scope, element, attrs, controller, transcludeFn) {
    transcludeFn(scope, function(clone, scope) {
        element.append(clone);
    }
}

在我的实际代码中是不正确的。

我的实际代码调用transcludeFn()，没有'scope'初始参数，只有回调函数('scope'参数在transcludeFn中是可选的)。

我不明白的是，在Angular Tips博客(http://angular-tips.com/blog/2014/03/transclusion-and-scopes/)的一篇文章中，page -list中被转包的内容(即按钮)的默认作用域是page -list的PARENT的作用域，而不是page -list。

让按钮的作用域成为页面列表作用域的方法是在transcludeFn中设置可选的第一个'scope'参数。然后，跨包内容的作用域使用该作用域作为自己的作用域。未指定，该参数默认设置为page -list-scope.$parent。将其强制到页面列表作用域可以修复所有问题，因为这是定义pgList的地方。

感谢博客作者Jesus Rodriguez非常清楚地解释了这一切是如何工作的。