CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directive
BastienSander
BastienSander

Reputation: 1838

Passing information through directives

I am using angularJs.

I have this kind of html:

<body>
<layout>
    <menu>
    </menu>
    <wrappers>
        <article ng-repeat="folder in folders">
                            <!-- some html -->
            <button editFolder="folder.name">
        </article>
    </wrappers>
</layout>
<div myPopUp>
          <input type="text" placeholder="">
          <button ng-click="editFolder()">
</div>
</body>

When the user click on the button editFolder, I would like the popUp to show (for this I use a jQuery plugin with the directive below.

But I need to pass some values specific to the scope of the button clicked to the popUp. And here is my problem, I don't know how to pass those values from one scope to another on the click event.

I tried to add a require with a controller shared but the div myPopUp is not a parent of the other one...

Please note the I cannot move myPopUp div.

app.directive('editFolder', function() {
    return {
        restrict: 'A',
        template: '<a><img src="img/bt-edit.svg" alt="Modifier"></a>',
        link: function(scope, elem, attrs) {
            elem.bind("click", function(){
                var self = $(this), content = $(''); 
                $(attrs.thePopUp).bPopup({
                    onOpen: function() {
                        content.html(self.data('bpopup') || '');
                    },
                    onClose: function() {
                        content.empty();
                    }
                }); 
            })
        }
    }
});

Am I in the wrong way? What do you suggest I do ?

Upvotes: 0

Views: 50

Answers (1)

Marcel
Marcel

Reputation: 1514

You can use AngularJS events for passing values and starting some behavior.

  • Fire an event from the place you want with some values.

  • Catch the event in myPopUp

    //Catcher in myPopUp
$rootScope.$on("myEvent", function (event, value1, value2) {

});

//Event firing from custom location
$rootScope.$broadcast("myEvent", "value1", "value2");

jsFiddle example

It's also possible to add a parent controller that holds the values

<div ng-app="app">
    <!-- hold the values in the parent scope -->
    <div ng-controller="myParent">
        <!-- update the values in the parent scope from child controllers -->
        <!-- + by calling a function in the parent -->
        <!-- + by directly changing the values of the parent -->
        <div ng-controller="myCtrl"></div>
        <!-- link the values for the popup to the parent scope values -->
        <my-pop-up v1="value1" v2="value2"></my-pop-up>
    </div>
</div>

jsFiddle example

Upvotes: 1

Related Questions