Javascript 如何传递子指令'；将数据转换为AngularJS中的父指令

如何将子属性指令的scope或attr值传递给父指令

给定

widget

指令，使用视口中的

属性指令，我想在每次滚动文档时更新属性
inView
，并将更新后的值传递给父指令
widget
：


视口内指令：作为父指令“widget”的属性传入

小部件指令：

angular.module('app').directive('widget', function() {
    return {
      restrict: 'AE',
      scope: {
        inView: '='
      },
      transclude: false,
      templateUrl: 'directives/widgets/widgets.tpl.html',
      link: function(scope) {
        console.log('In Viewport: ', scope.inView); // Null

您可以在父指令上公开API，并使用isolateScope（）访问它

这是一张工作票

var-app=angular.module（“app”，[]）；
应用程序指令（“小部件”，函数（$rootScope）{
返回{
模板：“滚动此页面，小部件将更新。滚动Y:{{scrollPosY}}”，
作用域：{}，//以下是访问父指令变量的方法

angular.module('myApp', []).directive('widget', function() {
    return {
        restrict: 'E',
        template: '<viewport in-view="variable"></viewport> <h1>{{variable}}</h1>',
        link: function(scope, iAttrs) {

            scope.variable = 10;
        }
    }
}).directive('viewport', function() {
    return {
        restrict: 'E',
        scope: {
                inView: "=",
            },
        template: '<button ng-click="click()">Directive</button>',
        link: function(scope, iElement, iAttrs) {
                        scope.click = function() {
                scope.inView++;
            }
        }
    }
});

angular.module（'myApp'，[]）.directive（'widget'，function（）{
返回{
限制：'E'，
模板：“{variable}}”，
链接：功能（范围，iAttrs）{
scope.variable=10；
}
}
}).directive（'viewport'，function（）{
返回{
限制：'E'，
范围：{
查看：“=”，
},
模板：“指令”，
链接：功能（范围、IELENT、iAttrs）{
scope.click=函数（）{
scope.inView++；
}
}
}
});

HTML

<div ng-app="myApp" ng-controller="Ctrl1">
    <widget></widget>
</div>



这是正在工作的jsfiddle

如果您有任何问题，请在评论框中询问，这里有一个使用您的指令结构的工作小提琴：

标记如下所示：

<div ng-controller="MyCtrl" style="height: 1200px;">
  {{name}}
  <hr>
  <widget in-viewport></widget>
</div>


{{name}}


只需滚动窗口即可触发事件。请注意，parent指令有一个手表，用于证明var已更新

var myApp = angular.module('myApp',[]);

myApp.directive('inViewport', function($timeout) {
    return {
      restrict: 'A',
      scope: false, // ensure scope is same as parents
      link: function(scope, element, attr) {
        angular.element(window).bind('scroll', function() {
          console.log('Called');
          $timeout(function() {
            scope.inView++;
          }, 0);
        });
      }
    };
  });

  myApp.directive('widget', function() {
    return {
      restrict: 'AE',
      transclude: false,
      template: '<p>This is a widget</p>',
      link: function(scope) {
        scope.inView = 0;
        console.log('In Viewport: ', scope.inView); // Null

        scope.$watch('inView', function(newVal, oldVal) {
            console.log('Updated by the child directive: ', scope.inView);
        });
      }
    }
  });

function MyCtrl($scope) {
    $scope.name = 'Angular Directive Stuff';
}

var myApp=angular.module（'myApp'，[]）；
myApp.directive（'inViewport'，函数（$timeout）{
返回{
限制：“A”，
scope:false，//确保作用域与父级相同
链接：功能（范围、元素、属性）{
angular.element（window.bind（'scroll'，function（））{
log（'Called'）；
$timeout（函数（）{
scope.inView++；
}, 0);
});
}
};
});
myApp.directive（'widget'，function（）{
返回{
限制：“AE”，
排除：错误，
模板：“这是一个小部件”，
链接：功能（范围）{
scope.inView=0；
console.log（'在视口中：'，scope.inView）；//Null
范围.$watch（'inView'，函数（newVal，oldVal）{
log（'由子指令更新：'，scope.inView）；
});
}
}
});
函数MyCtrl（$scope）{
$scope.name='Angular Directive Stuff'；
}
什么是父指令？什么是子指令？因为
在viewport
中是
小部件
上的一个属性，我认为
小部件
将是
在viewport
中的父指令，听起来可能很混乱，从架构上讲，这些指令是同级的。但是控制器模板上的指令是一个孩子吗？困惑。我如何才能为一个指令创建一个服务来更新该指令在scroll上的作用域变量/属性？问题：使用console.log，您能否确认此行
scope.inView=isElementInViewport（元素）；
是否被调用到该事件处理程序上？如果是，并且您没有看到值更改，则可能是您需要在
处理程序中使用一个
作用域。$apply（）
在
滚动
处理程序中正确刷新模型。您“不确定为什么要以双向绑定参数的形式查看，但现在开始”-我真正想要的是一种可重用的方法，在这种方法中，我可以告诉任何附带了
inViewport
服务的小部件是否能够知道它是否在滚动的视口视图中。如果是这样，我相信这就是答案。你试过小提琴吗？哦，我明白了。你想要一个适用于不同类型小部件的指令吗s、 很抱歉，第一次没有得到它。使用alternative更新解决方案。@Growler，我已更新此解决方案，以使用一种获取isolatd作用域的方法，从而使它适用于任何小部件，只要它实现了update（）方法。我想这解决了您提出的所有问题。
<div ng-controller="MyCtrl" style="height: 1200px;">
  {{name}}
  <hr>
  <widget in-viewport></widget>
</div>

var myApp = angular.module('myApp',[]);

myApp.directive('inViewport', function($timeout) {
    return {
      restrict: 'A',
      scope: false, // ensure scope is same as parents
      link: function(scope, element, attr) {
        angular.element(window).bind('scroll', function() {
          console.log('Called');
          $timeout(function() {
            scope.inView++;
          }, 0);
        });
      }
    };
  });

  myApp.directive('widget', function() {
    return {
      restrict: 'AE',
      transclude: false,
      template: '<p>This is a widget</p>',
      link: function(scope) {
        scope.inView = 0;
        console.log('In Viewport: ', scope.inView); // Null

        scope.$watch('inView', function(newVal, oldVal) {
            console.log('Updated by the child directive: ', scope.inView);
        });
      }
    }
  });

function MyCtrl($scope) {
    $scope.name = 'Angular Directive Stuff';
}