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

Adjust the content size to 100% based on the quantity of items in a row

Converting a timestamp to a date format within AngularJS interpolation

Error in JSON parsing: Unexpected token 'u' at the beginning of the input in Angular2

Unable to activate function in controller from AngularJS directive

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

Error: Collection2 validation did not pass: The field 'name' must be filled in, the field 'email' cannot be empty, and the field 'message' is mandatory

What is the best way to handle sequential $http calls in AngularJS? Specifically, I want to make the second $http call dependent on the response of the first

Struggling to eliminate buttons upon clicking, but they persistently reappear (JavaScript, HTML)

Updating the fixed value and sending it to subordinate controllers in Angular version 1.4.9

Navigating to an Element in React's Document Object Model

Menu options are unresponsive to clicks in the dropdown

Creating a custom arrow design for a select input field using CSS

Ways to dynamically assign a class to a single element within a group of identical elements

Convert the list items into JSON format

Transmitting data as an array using JQuery

jQuery is missing an essential component that is causing an error

Show a pair of pictures every X hours using Javascript

Executing ng-click to access outer controller from within nested ng-controllers

What is the proper method for securing this?

We were caught off guard by the TypeScript error: an unexpected token showed up when we were expecting a constructor,