When using the multiple transclude component in the Angularjs application, strange behavior is observed: changes in the models of the first slot are not visible in the controller.

Example

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

Tell me why the binding model of the example2Model does not work, although the binding model of the example1Model works correctly?

  • and where did you get that such code will work, you create a directive that should load the code from the component-template.html file, but there is no file itself, the templates do not work like that ( docs.angularjs.org/api/ng/directive/script ). Replace <test-component> with a regular <div> and the model works correctly -
  • This code is an example, with the string "<script type =" text / ng-template "id =" component-template.html ">" indicating to the angular that the template should be taken from the current HTML area. The documentation you refer to ( docs.angularjs.org/api/ng/directive/script ) has an example in support of the behavior I described. In the full version of the application, the code of the component-template.html file is located separately, and the situation is similar. - Vladimir Sover

1 answer 1

I asked a similar question in the English version, suggested a working solution:

For the example to work, you need to replace example2Model with o.example2Model and change the controller code:

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

https://stackoverflow.com/questions/41561988/strange-behavior-using-multiple-transclude-component-in-angularjs-1-6-1