0

Suppose the following blueprint code:

<div ng-controller="myCtrl">
    <div ng-repeat="...">
        <div ng-repeat="...">
            <div ng-repeat="...">
                <div ng=if="..." my-directive>
                </div>
            </div>
        </div>
    </div>
</div>    

myApp.directive('myDirective',  function() {
    return {                   
        controller: function($scope){
            console.log('controller scope');
            console.log($scope);
        },  
        link:function(scope,element){ 
            console.log('link scope');
            console.log(scope);    
        }
    }
});

Both outputs in console will point to the scope created by ng-if directive. My question is how may I access myCtrl's scope from inside the directive . Of course not by using $parent.$parent....

Unknown developer
  • 5,414
  • 13
  • 52
  • 100

3 Answers3

1

The easiest way could be by using require in the directive, like:

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


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

myApp.controller("MyCtrl", function($scope) {
    this.text = "I am in Controller Scope";
    this.getValue = function() { return this.text; };
});

myApp.directive("myDirective", function() {
    return {
        require: "^ngController",
        link: function(scope, elem, attrs, ngCtrl) {
            elem.text(ngCtrl.getValue());
        }
    };
});

EDIT

In your case, I think you could use the controller scope variables and methods in the directive by using scope binding with &; snippet below:

<div ng-controller="MyCtrl as vm">
    <my-directive on-get-value="vm.getValue()">
    </my-directive>
 </div>

angular.module('app', [])
.controller('MyCtrl', function($window) {
    var vm = this;
    vm.getValue = function() { $window.alert("I am in Controller Scope"); };
})
.directive('myDirective', function() {
  return {
    scope: {
       onGetValue:'&'
    },
    controllerAs:'vm',
    controller: function($scope) {
         $scope.onGetValue();
    }
  };
});
Mukesh Rawat
  • 2,047
  • 16
  • 30
  • Yes you are right. However, I forgot to mention (my blueprint was not accurate) that I am using ui-routing. Therefore, there is no ng-controller. The whole page is bound to myCtrl via ui-routing. Any idea for that case? Thank you – Unknown developer Jan 19 '17 at 16:44
  • @ILIAS, I updated my answer and added a scope binding with the directive. I hope that will solve it. Let me know about it.. – Mukesh Rawat Jan 19 '17 at 17:26
0

Use services to share data between angular components. This question might be a good start: Share data between AngularJS controllers. This approach will work for sharing data between controller and directive as well

Community
  • 1
  • 1
Slava.K
  • 3,073
  • 3
  • 17
  • 28
0

When you are creating your directive, the returning function is called DDO (Directive Defining Object). One of its attributes is 'scope'. if you initialize it with scope : true, the directive will prototypically inherit the parent scope. If you set scope: false, the directive will use the parent scope. And finally, if you set scope : {...}, it will created an isolated scope.

var app = angular.module("test",[]);

app.controller("myCntrl",function($scope){
    $scope.text = "Im in controller Scope";
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: true,
        template: "<div>Where are you, directive ? {{text}}</div>"
    };
});
h2 {
    cursor: pointer;
}
.directive {
    border: 5px solid #F5BF6E;
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="test">
    
    <div ng-controller="myCntrl">
        <h2 ng-click="reverseName()">Where are you ? {{text}}</h2>
        <div my-directive class='directive'></div>
    </div>
</div>

You can check this link for more details : Directive Scopes

Marcelo de Lima
  • 116
  • 3