Передайте данные из директивы parent от дочерней директивы

Привет, ребята, у меня есть небольшой вопрос. У меня есть директива, которая имеет ng-repeat и transclude, и внутри нее отделяются несколько других директив, которые должны наследовать конкретный объект из итерации ...Передайте данные из директивы parent от дочерней директивы

Я только смог сделать это с помощью поля $. .. Это не нравится, потому что если родитель изменяет эту область, то $ parent может умножить на область. $ Parent. $ Parent. ..

Вопрос в том, как я могу передать каждый объект итерации директивам для детей? Я попытался с требуете и может быть $ braodcast .. но с этим я не могу отправить конкретный объект itteration ...

<div demo-parent> 
    <div demo-child1></div> 
    <div demo-child2></div> 
</div> 

var demo = [obj1, obj2, obj3]; 

demo.directive('demoParent', [function() { 
    return { 
     scope: true, 
     transclude: true, 
     template: '<div ng-repeat="d in demo" ng-transclude></div>' 
    ] 
}]); 

demo.directive('demoChild1', [function() { 
    function link(scope, el, attr) { 
     scope.someInfo = the specific info from parent; // now with scope.$parent.$parent.d 
    } 

    return { 
     scope: true, 
     transclude: true, 
     template: '{{someInfo}}', 
     link: link 
    ] 
}]); 


demo.directive('demoChild2', [function() { 
    function link(scope, el, attr) { 
     scope.someInfo = the specific info from parent; // now with scope.$parent.$parent.d 
    } 

    return { 
     scope: true, 
     transclude: true, 
     template: '{{someInfo}}', 
     link: link 
    ] 
}]);

demoChild1 и demoChild2 находятся внутри demoParent в разметке, но sepparate директивы

источник

2016-06-14 Obretin Alexandru

Здравствуйте, не могли бы вы добавить минимальный, полный и поддающийся проверке пример на ваш вопрос, это поможет вам понять ваш вопрос: http://stackoverflow.com/help/mcve –

Уверен, что было в торопитесь, вот очень замаскированная идея того, чего я пытаюсь достичь. –

. Лучший способ обмена данными между директивами - использовать службу. – Tomer

Eсть способ сделать это. Корень проблемы лежит где-то с областью трансклюзии и масштабом шаблона. Я столкнулся с множеством замечательных статей, обсуждая этот вопрос; here, here (really good one) и here

Кроме того, я наткнулся на отличный SO question and (bottom) answer, что заслуживают 99% кредита. Я только адаптировал его к вашему сценарию.

В вашем вопросе вы используете дочерний объект, но есть способ сделать это с изолированной областью (которая может быть более безопасной для вас), которую я также покажу.

И, наконец, я не эксперт по AngularJS. Мой ответ может быть не лучшим решением или самым результативным. Ваш прецедент определенно необычен, и вам может потребоваться пересмотреть то, что вы пытаетесь сделать (или предоставить дополнительную информацию по вашему вопросу, и, возможно, мы сможем предложить лучший дизайн)

Без дальнейших церемоний. Для моих целей тестирования я упростил ваш демонстрационный массив, включил контроллер в родительскую директиву для определения указанного массива и несколько раз указал мои директивы.

HTML:

<body ng-app="soPOC"> 
    <div demo-parent> 
     <div demo-child-one></div> 
     <div demo-child-two></div> 
    </div>

so.module файл, определяющий корневой модуль:

(function() { 
'use strict'; 
    angular.module('soPOC', []); 
})();

демо-parent.directive.js файл, определяющий родительская директива:

(function() { 
'use strict'; 

angular.module('soPOC') 
    .directive('demoParent', demoParent); 

demoParent.$inject = ['$compile']; 

function demoParent($compile) { 
    var transclude; 
    var template = '<div ng-repeat="item in demos"></div>'; 
    var directive = { 
     restrict: 'EA', 
     controller: controller, 
     compile: compile 
    }; 
    return directive; 

    function compile(ele) { 
     transclude = ele.html(); 
     ele.html(''); 

     return function (scope, elem) { 
      var tpl = angular.element(template); 
      tpl.append(transclude); 
      $compile(tpl)(scope); 
      elem.append(tpl); 
     } 
    } 

    //deviation from your code 
    controller.$inject = ['$scope']; 
    function controller($scope) { 
     //test array for demo items 
     $scope.demos = ['test1', 'test2']; 
    } 
} 

})();

demo-child.direct ive.js определить ребенка, директивы один и два:

(function() { 
'use strict'; 

angular 
    .module('soPOC') 
    .directive('demoChildOne', demoChildOne) 
    .directive('demoChildTwo', demoChildTwo); 

function demoChildOne() { 
    var directive = { 
     link: link, 
     scope: true, 
     restrict: 'EA', 
     template: '<div>{{someInfo}}</div>' 
    }; 
    return directive; 

    function link(scope, element, attrs) { 
     scope.someInfo = scope.item; 
    } 
} 

function demoChildTwo() { 
    var directive = { 
     link: link, 
     scope: true, 
     restrict: 'EA', 
     template: '<div>{{someInfo}}</div>' 
    }; 
    return directive; 

    function link(scope, element, attrs) { 
     scope.someInfo = scope.item; 
    } 
} 

})();

Если вы идете с изолированной стиль области видимости, то ваш HTML изменения, вы можете уронить функции ссылок из дочерних директив и синтаксис ребенка директивы немного изменить ,

HTML:

<div demo-parent> 
     <div demo-child-one item="item"></div> 
     <div demo-child-two item="item"></div> 
    </div>

Директива:

function demoChildOne() { 
    var directive = { 
     scope: { 
      item: '=' 
     }, 
     restrict: 'EA', 
     template: '<div>{{item}}</div>' 
    }; 
    return directive; 
}

Я прочитал статьи я связан, чтобы получить лучшее понимание того, почему это решение работает и вчитываясь по вопросам определения объема между шаблонами, переходами и директивами. hth

источник

2016-06-14 22:43:12 TSmith

Передайте данные из директивы parent от дочерней директивы

ответ

Смежные вопросы