how to make a directive modify the content of another directive?

Question

I have a set of dom elements that needs to be modified in block. In the following example the "block" directive is going to add an edit link inside of it.

<div block>
     <div editable="text1">this is editable</div>
     <div editable="text2">this is another editable</div>
</div>

I want the edit link to populate another directive (called "panel"), with one input field per each editable element inside of the block. Of course the input fields must bind to the above dom elements. The blocks may be dinamycally placed inside of ng-switch and/or ng-repeat, so I need to consider the different scope levels.

The specific question is how do I make a directive modify the content of another directive ? I only found examples on how to make two directives communicate when attached to the same element.

At the moment I'm trying to use jQuery inside of the linking function of the "block" directive to get a list of the editable elements and display it in the "panel" using a controller scope property, but I couldn't make it work for ng-repeat/ng-switch.

If possible, a general suggestion on how to approach this problem in AngularJS is really appreciated!!

Thank you

Of course, the question (at least the specific one) is only related on how to make the input fields appear. The editable content is managed by a model and is already bind to the editable directive. I just need to create the fields to edit it in the panel. — Antonio Madonna, Jun 08 '13 at 21:09
I'm curious about what the block/panel directive is supposed to do, specifically. Does it have data or properties? If it only has display, then why not just have a "block" css class? We could probably answer better if you put an example of what you're trying to do or how far you've gotten, even if it's breaking; use jsfiddle or plunker or something and update your question please. — Barnabas Kendall, Jun 08 '13 at 21:35
The panel needs to display input fields for each of the editable elements in the block directive. However I've resolved reading this [great answer](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs) — Antonio Madonna, Jun 09 '13 at 08:05

score 0 · Answer 1 · answered Jun 08 '13 at 21:39

I had the same question before and have Fiddle example, for calling Directive from directive. Maybe it will help you.

HTML

<div ng-controller="MyCtrl">
  <div directive-foo></div>
</div>

JS

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

app.directive('directiveFoo', function() {
return {
    template: '<div directive-bar="123">bar</div>',
    replace: true,
    controller: function() {
        console.log('in foo ctrl');
        this.isFooAlive = function() {
            return 'Foo is alive and well';
        }
    }
  }
});
app.directive('directiveBar', function() {
  return {
    controller: function() {
        console.log('in bar ctrl');
    },
    require: 'directiveFoo',
    link: function(scope, element, attrs, fooCtrl) {
        console.log(fooCtrl.isFooAlive());
    }
  }
});

function MyCtrl($scope) {
}

these are nested directives, I needed to communicate between two completely separate directives. — Antonio Madonna, Jun 09 '13 at 08:02

score 0 · Answer 2 · answered Jun 09 '13 at 08:01

0

I'm using a controller scope array to hold the data of the fields being edited in the panel, and the problem was that I was trying to empty the array using scope.myarray = [] which was creating a new array in the child scope.

answered Jun 09 '13 at 08:01

Antonio Madonna

919
1
9
18

how to make a directive modify the content of another directive?

2 Answers2