Question

我有一个对象，我正在使用ngRepeat进行迭代。此对象包含有关在标记中呈现何种类型的指令以及提供这些指令的值的信息。到目前为止，我还没有能够使用Angular进行这种类型的动态渲染，它确实会让模板感觉像是可重复使用的模板。

控制器的

$scope.myFunk = function(obj) {
  alert(obj.target);
};

$scope.fruits = [
  {
    label: 'Banana',
    params: { target: 'ground' },
    action: {
      directive: 'ng-click',
      value: $scope.myFunk
    }
  }
];

模板的

<ul>
  <li ng-repeat="fruit in fruits">
    <!-- Expecting to see "ground" in an alert() when clicking -->
    <a href {{fruit.action.directive}}="{{fruit.action.value}}{{(fruit.params)}}">
      {{fruit.label}}
    </a>
  </li>
</ul>

Here's a plunker

我正试图通过角度来评估这样的事情：

<li>
  <a href ng-click="myFunk({ target: 'ground' })">Banana</a>
</li>

通常我只是在标记中声明一般角度方式的指令，但在这里我真的需要具有使用各个值渲染任意指令的灵活性，这些值可能是具有自己参数的函数。

我怎样才能做到这一点？

Answer 1

这是否符合要求？

app.directive('arbitraryThing', function(){
  return {
    restrict: 'EA',
    scope: {
      params: '='
    }, 
    link: function(scope, element, attr)
      { 
        element.on(scope.params.action.directive, function(event){
          event.preventDefault();
          scope.params.action.value({ target: scope.params.params.target})
      })
    }
    }
  })

http://plnkr.co/edit/slr9M0YK0JuzcMPWrMqr?p=preview

如何在AngularJS中呈现动态指令，函数和参数

1 个答案: