CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangularjs-directiveangularjs-scope
Cranio
Cranio

Reputation: 9847

Accessing directive scope from a separate controller

Let's say i have a <lightbox> directive in AngularJS. The lighbox has two params: title and image_source, which in turn are referenced in its HTML with {{title}} and {{image_source}}.

Because I use Bootstrap's modal, the directive must say on the outmost scope of the page (if I insert it in the inner DOM elements it can have display problems).

I understand that if the directive is in a "parent" controller, there are many ways to interact:

<div ng-controller="ParentCtrl">
  <lightbox src='mySrc' ... >
</div>

but I am forced to pull it out:

<div ng-controller="ParentCtrl">
</div>
<lightbox ...>

(Edit: to clarify: i am forced to put the modal OUT of the controller (which is a template called by a route) because it interacts badly if it is not. Another way would be to wrap all the page in a Main controller, but I'm not sure it's elegant.)

But how do I access the internal directive scope and change dynamically the two values?

(Edit: thought of using a service, not sure if it is the right way, though)

Upvotes: 2

Views: 96

Answers (1)

Rajamohan Anguchamy
Rajamohan Anguchamy

Reputation: 1736

this is method to call rootscope to directive 

angular.module("directiveAPP", [])
    .controller("directiveController", function ($scope, $rootScope) {
    $rootScope.src = "http://picbook.in/wp-content/uploads/2014/07/image_123.jpg";
    $rootScope.title = "hai";
}).directive("lightBox", function () {
    return {
        restrict: 'E',
        template: '<div><img src="{{imageSrc}}" title="{{imageTitle}}" width="100px" style="border:solid #ddd 1px;" /></div>',
        scope: {
            imageSrc: '=',
            imageTitle: '='
        }
    };
});

this one use of directive

<div ng-app="directiveAPP">
    <div ng-controller="directiveController">
        <light-box image-src="src" image-title="title"></light-box>
    </div>
    <light-box image-src="src" image-title="title"></light-box>
</div>

FIDDLE LINK

Upvotes: 1

Related Questions