如何在AngularJS中将子指令的数据传递给父指令

Question

如何将子属性指令的作用域或attr值传递给父指令？

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

<widget in-viewport></widget>

在Viewport指令中：作为父指令“ widget”的属性传入

angular.module('app').directive('inViewport', function() {
    return {
      restrict: 'A',
      scope: false, // ensure scope is same as parents
      link: function(scope, element, attr) {
        angular.element(document).on('scroll', function() {
          // I've tried binding it to attr and parent scope of "widget" directive

          attr.inView = isElementInViewport(element);
          scope.inView = isElementInViewport(element);
        });
      }
    };
  });

小部件指令：

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

Answer 1

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

这是工作中的小提琴 。

var app = angular.module("app",[]);

app.directive("widget", function($rootScope){
        return {
        template: "<div>Scroll this page and widget will update. Scroll Y: {{scrollPosY}}</div>",
      scope: {},  // <-- Creating isolate scope on <widget>.  This is REQUIRED.
      controller: ['$scope', function DirContainerController($scope) {
        $scope.scrollPosY = 0;
        // Creating an update function.
        $scope.update = function(position) {
          $scope.scrollPosY = position;
          $scope.$digest();
        };
      }],
    }
});

app.directive("inViewport", function($window, $timeout, $rootScope){
        return {
      restrict: 'A',
      link:function(scope, element, attrs, parentCtrl){
        // Get the scope.  This can be any directive.
        var parentScope = element.isolateScope();
        angular.element(document).on('scroll', function() {
          // As long as the parent directive implements an 'update()' function this will work.
          parentScope.update($window.scrollY);
          console.log('parentScope: ', parentScope);
        });
      }
    }
});

Answer 2

这是您访问父指令变量的方法，

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

HTML

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

这是工作中的jsfiddle http://jsfiddle.net/p75DS/784/

如有任何疑问，请在评论框中提问

Answer 3

这是使用您的指令结构的有效提琴： http : //jsfiddle.net/ADukg/9591/

标记是这样的：

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

只需滚动窗口即可触发事件。 请注意， 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';
}