Javascript Angularjs 1.6.1中使用多个转置组件的奇怪行为

我在Angularjs中使用多个转置组件时有一个奇怪的行为： 第一个插槽模型中的更改在控制器中不可见

<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>

例1
例2
示例1结果：{{example1Model}}

示例2结果：{{example2Model}
angular.module（“myApp”，[]）
.controller（“testController”，函数（$scope，$location）{
})
.component（“testComponent”{
templateUrl:“组件模板.html”，
排除：{
标题：“小组标题”，
正文：“panelBody”
},
控制器：函数（$scope，$element，$attrs）{
此。$doCheck=函数（）{
//做任何事
}
}
});

现在，如果您尝试在这个JSFIDLE中测试它：

为什么绑定模型

example2Model

不起作用？

---

但是

example1Model

绑定模型工作正常。

您需要在

ng model

中使用

，使其正常工作。为了更好地理解范围，请阅读本文：

要使其正常工作，请将

example2Model

替换为

o。example2Model

无处不在，并将

控制器更改为：

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