CODEWITHSUNDEEP
angularjs
Kocur4d
Kocur4d

Reputation: 6921

Accessing controller from a directive

I have an angular app:

HTML

  <body ng-controller="DashboardController as vm">
    <div ng-controller="OneController as vm">
      Number inside the controler: {{vm.number}}
    </div>
    <div ng-controller="TwoController as vm">
      <me-dir></me-dir>
    </div>
  </body>

ANGULAR

angular.module('plunker', [])

angular.module('plunker').controller 'DashboardController', ()->
  vm = @

angular.module('plunker').controller 'OneController', ()->
  vm = @
  vm.number = 7

angular.module('plunker').controller 'TwoController', ()->
  vm = @

angular.module('plunker').directive 'meDir', ()->
  return {
    #scope: {} ???
    #require ???
    #link ???
    template: "<strong>Got it!{{number}}</strong>"
  }

At the moment OneController isn't the parent of directive so require: '^ctrlName' doesn't work. I haven't found a lot of documentation about controller/require field. I know how to do it if I would have to pass it in using attributes and stuff. The question is strictly about require link controller directive fields.

Plunker link

Upvotes: 1

Views: 484

Answers (2)

Emir Marques
Emir Marques

Reputation: 2687

EDIT 2 

var app = angular.module("test", []);
app.controller("Ctrl1", function($scope) {
    $scope.name = "Harry Potter";
});

app.controller("Ctrl2", function($scope) {
    $scope.any = "Any"
});
app.directive("myDirective", function($compile) {
    return {
        restrict: "EA",
        scope: true,
        link : function(scope, element, attr) {
            var scopeCtrlOne = angular.element('[ng-controller="Ctrl1"]').scope();
            angular.element(element).append($compile(
                "<div>Your name is : {{name}}</div>" +
                "Change your name : <input type='text' ng-model='name' />")(scopeCtrlOne)
            );
		}
    };
});
 h2 {
   cursor: pointer;
 }
 .directive {
   border: 5px solid #F5BF6E;
   ;
   padding: 10px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="Ctrl1">
    <h2 ng-click="reverseName()"> {{name}}, CTRL ONE</h2>
    <div ng-controller="Ctrl2">
      <h2 ng-click="reverseName()"> {{any}}, CTRL TWO</h2>
      <div my-directive class='directive'></div>
    </div>
  </div>
</div>

EDIT 1

Look this. For details: http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

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

app.controller("Ctrl1",function($scope){
    $scope.name = "Harry";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: true,
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name' />"
    };
});
h2 {
    cursor: pointer;
}
.directive {
    border: 5px solid #F5BF6E;;
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
    
    <div ng-controller="Ctrl1">
        <h2 ng-click="reverseName()">Hey {{name}}, Click me to reverse your name</h2>
        <div my-directive class='directive'></div>
    </div>
</div>

Upvotes: -1

charlietfl
charlietfl

Reputation: 171679

Use a service to share data across components

Very simple service upgrade to your code with data shared between controller and directive through the service

angular.module('plunker').service 'SharedService', ()->  
  vm = @
  vm.number=7

angular.module('plunker').controller 'OneController', (SharedService)->
  vm = @
  vm.number = SharedService.number



angular.module('plunker').directive 'meDir', (SharedService)->
  return {
    scope:{}
    controllerAs:'dir'
    controller: ()->
      vm = @
      vm.number = SharedService.number
    template: "<strong>Got it!{{dir.number}}</strong>"
  }

DEMO

Upvotes: 2

Related Questions