Question

我有角状的部件设置是这样的：

(function(angular) { 
'use strict'; 
angular.module('bar', []) 
angular.module('bar').component('bar', { 
template: '<h1 ng-show="showMe">It worked</h1>', 
bindings: { 
    showMe: '=' 
    } 
}); 
})(window.angular); 

和另一个设置这样

(function(angular) { 
'use strict'; 
angular.module('foo', []) 
angular.module('foo').component('foo', { 
template: '<button ng-click="showMe = true">Click Me</button>' + 
     '<bar showMe = "showMe"></bar>' 
}); 
})(window.angular); 

我的index.html

<foo>Hello Plunker!</foo> 

但我无法在栏中获取模板来工作。我错过了什么？

我这里有一个plunkr：https://plnkr.co/edit/Qj9ZL9NFtdXWHBY0yzJf?p=preview

Answer 1

我怀疑你是战斗的事实，分量范围总是隔离（以便访问父范围只存在，如果你申报的结合）

我怀疑你的代码需要看起来像这样：

<foo newPopup="'something'"> 
    <!-- bar inside foo's template --> 
    <bar newPopup="$ctrl.newPopup"></bar> 
    <!-- end foo's template --> 
</foo> 

指令提供访问默认父范围，这或许可以解释为什么它的工作原理为指导您在内部组件（大概吧）竟被d可以访问父$ ctrl（因为指令默认也不设置controllerAs）。

编辑：我仍然认为我的原始答案是真实的，并与指示这与范围工作通过。在我猜测的plnkr中还有其他一些修正（下面的两个和三个）与原始问题无关，因为如果他们是我无法想象它会作为指令工作。

做以下修改时应该让你的普拉克工作：

1. 当你引用一个范围变量的组成部分，以$ CTRL前缀它（或任何你controllerAs值是该组件$ CTRL是在没有controllerAs语法的组件中的缺省值是指令的缺省值）。
2. 使foo的模块依赖于杆（它被消耗，这样它必须依赖于它）
3. 当指的驼峰范围（对于指令）或在模板变化首都结合（对于组分）值为小写，并添加破折号（例如驼背 - >驼回）

https://plnkr.co/edit/ka2owI?p=preview

foo.js

(function(angular) { 
    'use strict'; 
    angular.module('foo', ['bar']) 
    angular.module('foo').component('foo', { 
    template: '<button ng-click="$ctrl.showMe = true">Click Me</button>' + 
      '<bar show-me = "$ctrl.showMe"></bar>' 
}); 
})(window.angular); 

bar.js

(function(angular) { 
    'use strict'; 
    angular.module('bar', []) 
    angular.module('bar').component('bar', { 
    template: '<h1 ng-show="$ctrl.showMe">It worked</h1>', 
    bindings: { 
     showMe: '=' 
    } 
    }); 
})(window.angular); 

为了更清楚（因为$ CTRL上面并在作出其使用的普拉克使用中出现两次ambigious），你可以在这里有单独的controllerAs值和Foo的不应该在栏访问。 foo.js和bar.js可能只是合理如下所示，这将仍然工作：

foo.js

(function(angular) { 
    'use strict'; 
    angular.module('foo', ['bar']) 
    angular.module('foo').component('foo', { 
    controllerAs: 'fooCtrl', 
    template: '<button ng-click="fooCtrl.showMe = true">Click Me</button>' + 
      '<bar show-me = "fooCtrl.showMe"></bar>' 
}); 
})(window.angular); 

吧。js

(function(angular) { 
    'use strict'; 
    angular.module('bar', []) 
    angular.module('bar').component('bar', { 
    controllerAs: 'barCtrl', 
    template: '<h1 ng-show="barCtrl.showMe">It worked</h1>', 
    bindings: { 
     showMe: '=' 
    } 
    }); 
})(window.angular);