AngularJS 覆盖嵌入范围的范围

Question

初始化目录调用：

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

指令是 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);
        }
    }
});

来自文档 transcludeFn 的第一个参数应该替换 transclude 隔离范围的范围，但事实并非如此。 Here is the codepen working sample to test/work with.

Answer 1

ng-transclude 将保留指令元素内的内容，指令内的那些元素仍然只查找父范围。

<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);
        }
    }
});

您可以观看演示here

Answer 2

ng-transclude 将采用它所在 directive 的 scope

请检查此指令代码：

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

经过大量研究，我发现，直到现在还没有办法修改translucde的范围。所以我移出了重复，这打破了这个问题的逻辑，作为临时解决方案，我做了这个。 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>

和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>'
    }
});

我们在指令外指定 repeat 并根据需要在指令内使用 obj。

AngularJS 覆盖嵌入范围的范围

AngularJS override scope of transclude scope

angularjs

angularjs-directive