How to access scope from controller to custom directive in Angular?

Question

I am studying Angular now and I am in the directive lesson. And I am doing some exercise for myself but I have a problem.

I created a customer directive and what I want is the user will input any text in the textbox then the text from the input will be displayed in my custom directive.

Right bow I still don't get it.

Here's some of my code:

 <body ng-app="myApp">
    <div class="container" ng-controller="MainCtrl">
      <h3>Directive</h3>
      <div class="form-group">
        <label>Type text: </label>
        <input type="text" class="form-control" ng-model="greet_value" />
        <p>Value <div flx-greet-me></div></p>
      </div>
    </div>
  </body>

my directive:

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

myApp.controller('MainCtrl', function(){
  //some codes here
})
.directive('flxGreetMe', function() {

  var html_template = '<h1>' + $scope.greet_value + '</h1>';

  return {
    replace: true,
    restrict: 'AE',
    scope: true,
    template: html_template
  }

});

Can you help me with this? I am still new in Angular.

Here's the plnkr:

http://plnkr.co/edit/AugJkl?p=preview

Michael Lorton · Accepted Answer · 2015-06-26 03:49:31Z

1

Your problem is, obscurely, here:

scope: true,

What that does is isolate this directives scope from everything else. You could remove it and then do this:

 return {
    replace: true,
    restrict: 'AE',
    template: html_template,
    controller : function($scope) {
       $scope.$watch("greet_value", function(greet_value) {
         // whatever you like
       });
    }
  }

Or you could leave it and access the parent scope manually, like this:

 return {
    replace: true,
    restrict: 'AE',
    template: html_template,
    scope: true,
    controller : function($scope) {
       $scope.$parent.$watch("greet_value", function(greet_value) {
         // whatever you like
       });
    }
  }

Or you could make it more flexible by writing the view like this:

    <p>Value <div flx-greet-me="greet_value"></div></p>

And then

 return {
    replace: true,
    restrict: 'AE',
    template: html_template,
    scope: true,
    controller : function($attrs) {
       $attrs.flxGreetMe.$observe(function(arg_value) {
         // whatever you like
       });
    }
  }

(None of this code is tested.)

edited Jun 26, 2015 at 3:49

answered Jun 26, 2015 at 3:29

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Icycool Over a year ago

Behavior is described correctly, but I believe scope: true creates a child scope, and isolated scope refers to scope: {}

Michael Lorton Over a year ago

@Icycool -- what you say sounds correct. OP, why don't you experiment with the various possibilities and report back?

Shushanth Pallegar · Accepted Answer · 2015-06-26 03:46:48Z

1

you can also use isolate scope and use '=' in the scope which provides you two way binding in your directive like as shown below

  <input type="text" ng-model="val"/>
  <p  value="val"></p>  

    return {
    replace: true,
    transclue: true,
    scope:{

     value = "="

     },
     template : "<div>value</div>"

refer : https://docs.angularjs.org/guide/directive

answered Jun 26, 2015 at 3:46

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

Comments

Alaksandar Jesus Gene · Accepted Answer · 2015-06-26 04:12:23Z

The simplest way to achieve you task is

HTML

    <p><input type="text" ng-model="inputValue" ng-keyup="setDirectiveValue(inputValue)"></p>
    <p><div my-directive></div></p>

    <script src="libs/angular-1.3.15/angular.min.js"></script>
    <script src="scripts/ctrlToDirectiveApp.js"></script>

ctrlToDirectiveApp

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

myApp.controller("myCtrl", function($sce, $window, $scope){

    $scope.myDirectiveValue = "";

    $scope.setDirectiveValue = function(directiveValue){
        console.log(directiveValue);
        $scope.$watch(function(){
            $scope.myDirectiveValue = directiveValue;

        })
        console.log($scope.myDirectiveValue);
    };

})

myApp.directive("myDirective",function(){

    return {
        restrict: 'AE',
        template : "Hello {{myDirectiveValue}}"
    };

RIYAJ KHAN · Accepted Answer · 2015-06-26 05:25:40Z

0

Well you can achieve the same things using isolated scope's two way data binding.

JS :

myApp.controller('MainCtrl', function($scope){
  //some codes here
  $scope.greet_value = "Please change text"
})
.directive("flxGreetMe", function() {

  return {
    replace: true,
    restrict: 'AE',
    scope : {test : "="},
    template: '<h1>{{test}}</h1>' 
  }  

});

HTML :

<div flx-greet-me  test="greet_value" >
           </div>

Here is the plunker

answered Jun 26, 2015 at 5:25

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to access scope from controller to custom directive in Angular?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related