子指令如何将数据从其隔离范围传递到父范围指令?

时间:2014-10-26 11:48:05

标签: angularjs angularjs-directive angularjs-scope

我使用element-resize指令创建了一个非常好的子指令,用于计算元素的实际大小:

angular.module('myApp')
    .directive('subNode', function () {
        'use strict';
        return {
            restrict: 'E',
            replace: true,
            scope: {
                displayName: '@',
                nodeWidth: '@'
            },
            controller: ['$scope', '$element', function($scope, $element) {
            }],
            template: '<div element-resize>{{displayName}}-{{elementWidth}}</div>'
    };
});

如果我运行这个,我可以看到&#39; elementWidth&#39;是非常好的,但我不明白我的父指令现在正在读取正在创建的子范围数据?如果有人可以给出一个简单的例子,他们应该如何共享数据,这将是一个很大的帮助。

这是我的父指令,它应该计算所有子指令创建的宽度:不要理解如何。

angular.module('myApp')
    .directive('nodeCollection', function () {
        'use strict';
        return {
            restrict: 'E',
            replace: true,
            scope: {
                nodes: '=',
            },
             controller: ['$scope', '$element', '$attrs', '$rootScope', function(scope, $element, $attrs, $rootScope) {
            }],
            template: '<div element-resize><ul><li ng-repeat="node in nodes"><sub-node display-name="{{node.name}}"></sub-node></li></ul></div>'
        };
    }
);

element-resize指令:

angular.module('myApp')
    .directive('elementResize', function () {
        'use strict';
        return {
            restrict: 'A',
            controller: ['$scope', '$element', function($scope, $element) {

                $scope.getElementDimensions = function () {
                    return { 'h': $element.height(), 'w': $element.width() };
                };

                $scope.$watch($scope.getElementDimensions, function (newValue, oldValue) {
                    $scope.elementHeight = newValue.h;
                    $scope.elementWidth = newValue.w;
                }, true);
            }]
        };
    }
);

0 个答案:

没有答案