在Angularjs中使用多个transclude组件的奇怪行为1.6.1

Question

我在Angularjs中使用多个transclude组件的奇怪行为： 第一个slot模型中的更改在控制器中不可见。

<div ng-app="myApp" ng-controller="testController"> 

<script type="text/ng-template" id="component-template.html"> 
<div style="color:red;" ng-transclude="heading"> 
</div> 
<div style="color:blue;" ng-transclude="body"> 
</div> 
</script> 

Example1 
<input ng-model="example1Model"/> 

<test-component> 
    <panel-heading> 
     Example2 
     <input ng-model="example2Model"/> 
    </panel-heading> 
    <panel-body> 
    Example1Result:{{example1Model}}<br/> 
    Example2Result:{{example2Model}} 
    </panel-body> 
</test-component> 
</div> 

<script> 
angular.module("myApp", []) 
.controller("testController", function ($scope, $location) { 

}) 
.component("testComponent", { 
    templateUrl: "component-template.html", 
    transclude: { 
     heading: "panelHeading", 
     body: "panelBody" 
    }, 
    controller: function ($scope, $element, $attrs) {   
     this.$doCheck = function() { 

      //do anything 
     } 
    } 
}); 
</script> 

现在，如果你尝试测试它在此的jsfiddle：https://jsfiddle.net/Lpveophe/1/

为什么绑定模型example2Model没有工作？ 但是example1Model绑定模型正常工作。

Answer 1

您需要在ng-model中使用.才能使其正常工作。为了更好地理解的范围，请通过这篇文章：https://github.com/angular/angular.js/wiki/Understanding-Scopes

要使其工作，与o.example2Model取代example2Model无处不在，改变你的controller到：

.controller("testController", function ($scope, $location) { 
    $scope.o = {}; 
    $scope.o.example2Model = ''; 
})