Set ng-click attribute value from a string variable

Question

I have an external JSON file which is a collection of buttons/actions like this

   {  
   "foo1":{  
      "name":"productDetails",
      "displayAs":"button",
      "action":"viewDetails()"
   },
   "foo2":{  
      "name":"sell",
      "displayAs":"button",
      "action":"sellProduct()"
   }
}

Later, in my view, I create a <div> using ng-repeat for each object contained in that JSON.

My question is, can I set the ng-click property as it it in the JSON file like this?

<li ng-repeat = "field in fields">
    <div ng-click = field.action > {{field.name}} </div>
</li>

If you just use the function name in your json (like action: 'viewDetails'), ou could use $scope[field.action]() or this[field.action](), depending on how your controller is organized, or use an if/else tree: if (field.action === 'viewDetails()') $scope.viewDetails() — DevDig
– DevDig, Commented Mar 23, 2017 at 14:08
Yes, you can, you'll have to change your data slightly though. Do as @DevDig has said. Here is a fiddle — George
– George, Commented Mar 23, 2017 at 14:12
@KOUSIKMANDAL I wouldn't post this if I didn't try it, don't you think? :) — user5421954
– user5421954, Commented Mar 23, 2017 at 14:34

Sachila Ranawaka · Accepted Answer · 2017-03-23 14:18:35Z

1

you can do this using ng-bind-html.

 <li ng-repeat = "field in fields">
    <div bind-html-compile ng-bind-html="trust(field)"  >  </div>
  </li>

Add bind-html-compile directive to compile the DOM so that changes will effect to DOM elements

Directive

 .directive('bindHtmlCompile', ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(function() {
                return scope.$eval(attrs.bindHtmlCompile);
            }, function(value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    };
 }]);

In trust function pass the object as an argument and return the html trust element

 $scope.trust = function(html) {
    return $sce.trustAsHtml('<div ng-click = "' + html.action + '" > {{field.name}} </div>');
 }

Demo

angular.module("app",[])
.controller("ctrl",function($scope,$sce){

$scope.viewDetails = function(){console.log("viewDetails")}
$scope.sellProduct = function(){console.log("sellProduct")}
$scope.fields =    {  
   "foo1":{  
      "name":"productDetails",
      "displayAs":"button",
      "action":"viewDetails()" 
   },
   "foo2":{  
      "name":"sell",
      "displayAs":"button", 
      "action":"sellProduct()"
   }
}

$scope.trust = function(html){

return $sce.trustAsHtml('<div ng-click = "'+html.action+'" > {{field.name}} </div>');

}


}).directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <li ng-repeat = "field in fields">
    <div bind-html-compile ng-bind-html="trust(field)"  >  </div>
</li>
</div>

answered Mar 23, 2017 at 14:18

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pankaj Parkar Over a year ago

why ng-bind-html has trust(field), it has been designed to put html inside element..

Sachila Ranawaka Over a year ago

Trust function return html so that ng bind html will bind that

Pankaj Parkar Over a year ago

I'd suggest to do simpler way this commented

Collectives™ on Stack Overflow

Set ng-click attribute value from a string variable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related