angularjs: use to scope parameter of link function to get the parent controller property

Question

In my application, I came across one issue and I abstracted it to the simplest case as following.

<body ng-controller="MainCtrl">
    <input type="text" ng-model="color" placeholder="Enter a color"/>
    <input type="text" ng-model="name" placeholder="Enter a name"/>
    <hello-world/>
</body>

app.directive('helloWorld',function(){
    return{
        restrict: 'AE',
        replace: true,
        template: '<p style="background-color:{{color}}">Hello World</p>',
        link: function(scope,elem,attrs){
            elem.bind('click',function(){
                elem.css('background-color','white');
                scope.$apply(function(){
                     scope.color="white";
                });
            });
            elem.bind('mouseover',function(){
                elem.css('cursor','pointer');
                console.log(scope.name);
            });
        }
      }
   });

In the above case, I can get the name and color property from the MainCtrl controller. The demo is here: http://plnkr.co/edit/yrljsddgTtkAo0sZVjgf?p=preview

But in my real project, my usage about controller is a little different as following:

<body ng-controller="MainCtrl as main">
    <input type="text" ng-model="main.color" placeholder="Enter a color"/>
    <input type="text" ng-model="main.name" placeholder="Enter a name"/>
    <hello-world/>
</body>

I usually use as method as shown above.
But in this case, I don't know how to access the property in link function via scope arguments.The demo is here http://plnkr.co/edit/wnnWyRztZTounSyemPze?p=preview
Currently, the scope.name is undefined.
So any help?

the demo link was updated

Chris Bao
– Chris Bao

2017-01-17 11:06:25 +00:00
Commented Jan 17, 2017 at 11:06 — Chris Bao
– Chris Bao, Commented Jan 17, 2017 at 11:06

M3ghana · Accepted Answer · 2017-01-17 11:01:55Z

As per your plunkr, You need to make it scope.main.name and scope.main.color ie

index.html

 <body ng-controller="MainCtrl as main">
    <input type="text" ng-model="main.color" placeholder="Enter a color"/>
    <input type="text" ng-model="main.name" placeholder="Enter a name"/>
    <hello-world/>
  </body>

script side

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

app.controller('MainCtrl', function($scope) {

});

app.directive('helloWorld',function(){
  return{
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{main.color}}">Hello World</p>',
    link: function(scope,elem,attrs){
      elem.bind('click',function(){
        elem.css('background-color','white');
        scope.$apply(function(){
          scope.main.color="white";
        });
      });
      elem.bind('mouseover',function(){
        console.log(scope.main.name);
        console.log(scope.main.color);
      });
    }
  }
});

Check the elem.bind function for the change

Collectives™ on Stack Overflow

angularjs: use to scope parameter of link function to get the parent controller property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related