javascript - 从字符串变量设置 ng-click 属性值

Question

我有一个外部 JSON 文件，它是这样的按钮/操作的集合

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

后来，在我看来，我创建了一个 <div>对该 JSON 中包含的每个对象使用 ng-repeat。

我的问题是，我可以像这样在 JSON 文件中设置 ng-click 属性吗？

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

Answer 1

您可以使用 ng-bind-html 来做到这一点。

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

添加 bind-html-compile 指令来编译 DOM，以便更改会影响 DOM 元素

指令

 .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);
            });
        }
    };
 }]);

在 trust 函数中将对象作为参数传递并返回 html 信任元素

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

演示

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>