CODEWITHSUNDEEP
javascriptangularjsangular-directive
SPG
SPG

Reputation: 6197

How to get value in directive from outside in Angular?

here is the plunker.
HTML:

<body ng-app="app">
    <h1>selectable</h1>
    <selectable text="link1" status="true"></selectable>
    <selectable text="link2" status="false"></selectable>
    <p>
      link1 is <!--status of link1, true or false-->
    </p>
    <p>
      link2 is <!--status of link2, true or false-->
    </p>
  </body>

JS:

angular.module("app", [])
.directive("selectable", function(){
  return {
    restrict: "AE",
    replace: true,
    scope: {
      status: "=",
      text: "@"
    },
    link: function(scope, ele, attr){
      ele.on("click", function(){
        scope.status = !scope.status;
        scope.$apply();
      });
    },
    templateUrl: "./tmpl.html"
  }
})

template:

<span class='myLink' ng-class='{"active": status, "": !status}'>
  {{text}}
  {{status}}
</span>

How can I get the status of link1 and link2 then show them up?
Thanks!

Upvotes: 0

Views: 574

Answers (3)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

use a ng-controller directive

<body ng-app="app" ng-controller="MainCtrl">

inside MainCtrl function define a two variables to represent status of the two links as,

.controller('MainCtrl', function($scope) {
    $scope.link_1_status = true;
    $scope.link_2_status = false;
})

bind these two variables to status variable of the directive scope

<selectable text="link1" status="link_1_status"></selectable>
<selectable text="link2" status="link_2_status"></selectable>

and print the status as,

<p>
    link1 is {{link1Bool}}
</p>
<p>
    link2 is {{link2Bool}}
</p>

here is the PLUNKER

OR if you prefer not to use ng-controller then use ng-init

<body ng-app="app" ng-init="link_1_status = true; link_2_status = false">
....
    <selectable text="link1" status="link_1_status"></selectable>
    <selectable text="link2" status="link_2_status"></selectable>    
....
</body>

here is the PLUNKER

WHY

If you using like <selectable text="link1" status="true"></selectable> then you assign the true to the directive scope status variable, when you click it will toggle the value but you can't access that value because you don't have any reference to that value (you just pass a raw value without a reference or identifire), so you need a reference to access that variable that's why we need something link_1_status & link_2_status to get access to the property.

Upvotes: 2

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

You need have that value inside some scope variable and pass it to directive attribute as you already using =(two way binding) angular will show magic of binding. If the value passed to isolated directive will get change then it will change the underlying scope value from where it passed & vice versa.

Markup

<body ng-app="app">
    <h1>selectable</h1>
    <selectable text="link1" status="link1Bool"></selectable>
    <selectable text="link2" status="link2Bool"></selectable>
    <p>
      link1 is {{link1Bool}}
    </p>
    <p>
      link2 is {{link2Bool}}
    </p>
</body>

Demo Here

Upvotes: 0

alek kowalczyk
alek kowalczyk

Reputation: 4936

Here is the plunker.

I think the proper way is to have a controller, and use him to share data between you form and add some logic to handle the data.

<body ng-app="app" ng-controller="ctrl">
<h1>selectable</h1>
<selectable text="link1" status="firstStatus"></selectable>
<selectable text="link2" status="secondStatus"></selectable>
<p>
  link1 is {{firstStatus}}
</p>
<p>
  link2 is {{secondStatus}}
</p>
</body>

and the basic controller code:

.controller("ctrl", function($scope){
  $scope.firstStatus = true;
  $scope.secondStatus = false;
})

Upvotes: 0

Related Questions