AngularJS覆盖范围的超越范围

Question

Initialize of the dir call:

<div ng-app="myApp">
  <dir arr="[{name: 'Dennis'}, {name: 'Bob'}]">
    <h3>Working as not wanted: {{$parent.obj.name}}</h3>
    <h3>Not working as wanted: {{obj.name}}</h3>
  </dir>
</div>

And the directive is self:

angular.module("myApp",[]).directive('dir', function(){
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            arr: '='
        }, 
        template: '<span ng-repeat="obj in arr"><ng-transclude></ng-transclude></span>',
        link: function(scope, iElement, iAttrs, controller, transcludeFn) {
            //transcludeFn(scope);
        }
    }
});

From docs transcludeFn with first argument should replace the scope of the transclude isolated scope, but it doesn't. Here is the codepen working sample to test/work with.

Answer 1

ng-transclude will leave the content as it is whatever inside the directive element and those elements inside directive still look for a parent scope only.

<div ng-app="myApp">
    <dir arr="[{name: 'Dennis'}, {name: 'Bob'}]">
        <h3>Working as not wanted: {{$parent.obj.name}}</h3>
    </dir>
</div>

angular.module("myApp",[]).directive('dir', function(){
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            arr: '='
        }, template: '<span ng-repeat="obj in arr"><ng-transclude></ng-transclude> <h3>Not working as wanted: {{obj.name}}</h3></span>',
        link: function(scope, iElement, iAttrs, controller, transcludeFn) {
            //transcludeFn(scope);
        }
    }
});

You can view the demo here

Answer 2

ng-transclude will take the scope of the directive in which it is present

Please check this directive code:

angular.module("myApp",[]).directive('dir', function(){
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            arr: '='
        }, template: '<span ng-repeat="obj in arr"><ng-transclude></ng-transclude></span>',
    link: function(scope, el, attrs, ctrl, transclude) {
      scope.arr = [{name: 'Dennis'}, {name: 'Bob'}];
      transclude(scope, function(clone, scope) {
        // this takes the parent scope
      });
    }
    }
});

Html:

<div ng-app="myApp">
  <dir arr="arr">
    <h3>Working as not wanted: {{$parent.obj.name}}</h3>
    <h3>Not working as wanted: {{arr | json}}</h3>
  </dir>
</div>

Here is a slackblitz for the same

Answer 3

After huge research, I figure out that, until now there is no way to modify the scope of translucde. So I moved out the repeat, which broke a bit the logic of this quesiton and as temporary solution I made this one. html:

<div ng-app="myApp" ng-controller="app">
  <dir obj="obj" ng-repeat="obj in arr">
    <h3>Looking to get: {{obj.name}}</h3>
  </dir>
</div>

and javascript:

ular.module("myApp", []).controller('app', function($scope){
  $scope.arr = [{name: 'Dennis'}, {name: 'Bob'}];
}).directive('wsort', function(){
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            obj: '='
        }, template: '<ng-transclude></ng-transclude>'
    }
});

Where we specify repeat outside of the directive and use the obj within as we need.