What is the best way to access external value in an Angular directive?

Question

What is the best way to access external value in an Angular directive?

check out this plunker link.
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>

Is there a way to retrieve the current status of both link1 and link2 and display them?
Appreciate any help!

javascript angularjs angular-directive

Answer 1

Answer №1

Implement the ng-controller directive to control functionality

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

Within the MainCtrl function, define two variables to represent the status of two links as follows:

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

Bind these variables to the status variable of the directive scope like this:

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

Print out the status using the following code:

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

Here is a link to the PLUNKER page

Alternatively, if you prefer not to use ng-controller, you can utilize ng-init instead.

<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 a link to the PLUNKER page

Reasoning Behind This Approach

If you simply use

<selectable text="link1" status="true"></selectable>

, you are assigning the value true directly to the directive scope's status variable. While it will toggle the value when clicked, you won't be able to access that value because there is no reference to it (you're passing just a raw value without any reference or identifier). Thus, having references like link_1_status and link_2_status allows you to access and manipulate the properties effectively.

Answer 2

Implement the ng-controller directive to control functionality

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

Within the MainCtrl function, define two variables to represent the status of two links as follows:

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

Bind these variables to the status variable of the directive scope like this:

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

Print out the status using the following code:

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

Here is a link to the PLUNKER page

Alternatively, if you prefer not to use ng-controller, you can utilize ng-init instead.

<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 a link to the PLUNKER page

Reasoning Behind This Approach

If you simply use

<selectable text="link1" status="true"></selectable>

, you are assigning the value true directly to the directive scope's status variable. While it will toggle the value when clicked, you won't be able to access that value because there is no reference to it (you're passing just a raw value without any reference or identifier). Thus, having references like link_1_status and link_2_status allows you to access and manipulate the properties effectively.

Answer 3

Answer №2

Check out the code sample I provided.

In my opinion, utilizing a controller is the correct approach for sharing data between your form and adding some logic to manage that 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>

Here is an example of the basic controller code:

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

Answer 4

Check out the code sample I provided.

In my opinion, utilizing a controller is the correct approach for sharing data between your form and adding some logic to manage that 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>

Here is an example of the basic controller code:

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

Answer 5

Answer №3

Make sure to store that value in a scope variable and then pass it to the directive attribute. Since you are already using = for two-way binding in Angular, the magic of binding will be displayed. If the value passed to the isolated directive changes, it will also change the underlying value in the scope from where it was passed and vice versa.

Code Example:

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

View Demo Here

Answer 6

Make sure to store that value in a scope variable and then pass it to the directive attribute. Since you are already using = for two-way binding in Angular, the magic of binding will be displayed. If the value passed to the isolated directive changes, it will also change the underlying value in the scope from where it was passed and vice versa.

Code Example:

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

View Demo Here

What is the best way to access external value in an Angular directive?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to retrieve information from a URL using the .get() method in a secure HTTPS connection

Node.js data transmission: Sending information from server to client

Using ajax to submit a request to the controller

Node.js NPM Google search results showing [ Object object ] instead of actual result

Interact with embedded elements in JavaScript by using the onClick event

Ways to retrieve my PHP output and display it on a page using Ajax

Navigate using Ui-Router or else utilize ng-admin

What is the best way to send the index of an array to a onClick event in ReactJS?

What steps can I take to determine the status of my Axios post request?

Updating the scope variable in an AngularJS directive

Ways to create a back-and-forth transition across a sequence

What is the best way to send an HTTP request in AngularJS to receive data in JSON format?

How can I extract the text enclosed in <li> tags using JavaScript?

Elevating State in React Architecture

Executing `removeChild` within a timeout during page load does not yield the expected results

What is the best way to fetch multiple values using momentjs from firebase?

React Redux components are failing to render after changes are made to the state array

Selecting an option from dropdown1 to retrieve a specific value from a JSON file

Unable to open a modal in Angular UI after closing the initial modal

What is the best way to extract the body content from a Markdown file that includes Frontmatter