Tips for binding a function dynamically to ng-click by using the function expression stored in the model

Question

Tips for binding a function dynamically to ng-click by using the function expression stored in the model

I've incorporated the code below into my Angular template to create a button bar containing Font Awesome icons:

<li 
    data-ng-repeat="btn in navigation.buttonBar" 
    data-ng-click="{{ btn[1] }}"
    class="btn btn-default" style="font-size: 30px; vertical-align: middle;"
    tooltip-placement="bottom" tooltip="{{ btn[2] }}">
        <i class="fa {{ btn[0] }}"></i>
</li>

navigation.buttonBar consists of the following array groupings:

[
    [ "fa-minus", "less()", "Display fewer cloud buttons." ],
    [ "fa-plus", "more()", "Show more cloud buttons." ],
    [ "fa-minus-square", "smaller()", "Reduce size of cloud buttons." ],
    [ "fa-plus-square", "bigger()", "Enlarge cloud buttons." ],
    [ "fa-bars", "toggleShowStrings()", "Switch on/off matching strings display." ],
    [ "fa-refresh", "initialize();", "Load additional content." ],
    [ "fa-undo", "resetQuery()", "Clear search query." ]
]

While the text and icons appear correctly, the buttons themselves are nonfunctional. Inspecting the element reveals that btn[1] has been expanded properly. What is the correct replacement for {{ btn[1] }} to ensure proper functionality?

javascript angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

It is not possible to assign a function expression as a string directly from a binding. Attempting to use interpolation will result in a syntax error, and using it as a binding is also not effective. Instead, consider utilizing $parse and implementing something like the following:

app.controller('MainCtrl',['$scope', '$parse', function($scope, $parse) { //<-- inject parse
    //.. Some code

    //Set up this function as the handler for ngClick by passing the function name you have in your model
    $scope.callFunc = function(exp){
       $parse(exp)($scope); //Parse the function name to get the expression and invoke it on the scope
    }
    //Define your specific functions to be called
    $scope.less = function(){
      console.log('less');
    }
    $scope.more = function(){
      console.log('more');
    }

In your view, include:

     data-ng-click="callFunc(btn[1])"

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

app.controller('MainCtrl', function($scope, $parse) {
  $scope.navigation = {buttonBar:[
    [ "fa-minus", "less()", "Show fewer cloud buttons." ],
    [ "fa-plus", "more()", "Show more cloud buttons." ],
    [ "fa-minus-square", "smaller()", "Make cloud buttons smaller." ],
    [ "fa-plus-square", "bigger()", "Make cloud buttons bigger." ],
    [ "fa-bars", "toggleShowStrings()", "Toggle display of matching strings." ],
    [ "fa-refresh", "initialize();", "Load more content." ],
    [ "fa-undo", "resetQuery()", "Clear query." ]
]};

  $scope.callFunc = function(exp){
    $parse(exp)($scope);
  }
  
  $scope.less = function(){
    console.log('less');
  }
  
  $scope.more = function(){
   console.log('more');
  }
});

    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6d626b79606d7e22667f4c3d223e2274">[email protected]</a>" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>


  <div ng-app="plunker" ng-controller="MainCtrl">
     <i>Click the first 2 buttons and check the console</i>
    <ul><li 
    data-ng-repeat="btn in navigation.buttonBar" 
    data-ng-click="callFunc(btn[1])"
    class="btn btn-default" style="font-size: 30px; vertical-align: middle;"
    tooltip-placement="bottom" tooltip="{{ btn[2] }}"
><i class="fa {{ btn[0] }}"></i></li></ul>
 </div>

Answer 2

It is not possible to assign a function expression as a string directly from a binding. Attempting to use interpolation will result in a syntax error, and using it as a binding is also not effective. Instead, consider utilizing $parse and implementing something like the following:

app.controller('MainCtrl',['$scope', '$parse', function($scope, $parse) { //<-- inject parse
    //.. Some code

    //Set up this function as the handler for ngClick by passing the function name you have in your model
    $scope.callFunc = function(exp){
       $parse(exp)($scope); //Parse the function name to get the expression and invoke it on the scope
    }
    //Define your specific functions to be called
    $scope.less = function(){
      console.log('less');
    }
    $scope.more = function(){
      console.log('more');
    }

In your view, include:

     data-ng-click="callFunc(btn[1])"

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

app.controller('MainCtrl', function($scope, $parse) {
  $scope.navigation = {buttonBar:[
    [ "fa-minus", "less()", "Show fewer cloud buttons." ],
    [ "fa-plus", "more()", "Show more cloud buttons." ],
    [ "fa-minus-square", "smaller()", "Make cloud buttons smaller." ],
    [ "fa-plus-square", "bigger()", "Make cloud buttons bigger." ],
    [ "fa-bars", "toggleShowStrings()", "Toggle display of matching strings." ],
    [ "fa-refresh", "initialize();", "Load more content." ],
    [ "fa-undo", "resetQuery()", "Clear query." ]
]};

  $scope.callFunc = function(exp){
    $parse(exp)($scope);
  }
  
  $scope.less = function(){
    console.log('less');
  }
  
  $scope.more = function(){
   console.log('more');
  }
});

    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6d626b79606d7e22667f4c3d223e2274">[email protected]</a>" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>


  <div ng-app="plunker" ng-controller="MainCtrl">
     <i>Click the first 2 buttons and check the console</i>
    <ul><li 
    data-ng-repeat="btn in navigation.buttonBar" 
    data-ng-click="callFunc(btn[1])"
    class="btn btn-default" style="font-size: 30px; vertical-align: middle;"
    tooltip-placement="bottom" tooltip="{{ btn[2] }}"
><i class="fa {{ btn[0] }}"></i></li></ul>
 </div>

Tips for binding a function dynamically to ng-click by using the function expression stored in the model

Answer №1

Similar questions

Retrieving error messages and status codes using Laravel and JWT authentication

The mesh takes on a more defined geometric shape once it has been processed using ThreeCSG

Contrasting actions observed when employing drag functionality with arrays of numbers versus arrays of objects

AngularJS failing to override default form submission using $compile

Exploring React's Suspense feature in an unconventional way without relying

Comparing node.js timer functions: cron.js versus setInterval

Child directive of AngularJS fails to initiate when parent directive is using templateUrl

Troubleshoot: Why is my AngularJS bootstrap.ui modal failing to

Include two arguments when making a $http POST request

Incorporate a PHP variable into JavaScript

Transform the object's structure into an array

Rails assets folder is not directed to the specified directory in the layout file

Having trouble querying with the dynamic ID field in the mongoose function(req, res, next, id) for MongoDB

"Standard" approach for a Date instance

Utilizing ui-router to resolve dynamic parameters

Arrange the objects in the array according to the specified items that should come after

What is the best way to automatically add a date and timestamp to every new entry?

Expanding form fields dynamically with AngularJS

Using setInterval to update the content of a Text Area continuously

The smartcard node encounters an SCardConnect error when attempting to scan the card, followed by an SCardListReaders error upon disconnect