模板函数中的 AngularJS 访问绑定

Posted 2023-02-23

【中文标题】模板函数中的 AngularJS 访问绑定

【英文标题】：AngularJS Access bindings in Template Function

【发布时间】：2017-07-15 12:35:12

【问题描述】：

我创建了一个组件来呈现基本的 html，它的唯一目的是在用户点击它时触发一个参数化事件。 由于所有控制器的控制器都完全相同，因此我将基于名为 componentType 的特定参数呈现 HTML。 我关心的是如何获取作为绑定的 componentType。

'use strict'

var app = angular.module('app');
app.component('htmlElement', 
    template: function ($element, $attrs, $log)         
        if ($attrs.componentType === 'link') 
            return '<a href="#" ng-click="$ctrl.fireEvent();"> $ctrl.text </a>';
         else if ($attrs.componentType === 'checkbox') 
            return '<input type="checkbox" ng-click="$ctrl.fireEvent();"> $ctrl.text ';
        
    ,
    bindings: 
        componentType: '<',
        text: '<',
        rowId: '<',
        event: '<'
    ,
    controller: function ($scope) 
        $scope.$ctrl.fireEvent = function () 
            $scope.$emit($scope.$ctrl.event,  rowId: $scope.$ctrl.rowId );
        
    
);

最后下面一行是我如何调用组件：

<html-element ng-if="cell.componentType" component-type="cell.componentType" text="cell.data.text" event="cell.data.event" row-id="cell.data.rowId"></html-element>

问题是 $attrs.componentType 给了我属性值，它是 var 的名称，所以它根本没有帮助我。 有人可以帮我吗？

【参考方案1】：

在 AngularJS 中无法评估属性绑定。见https://github.com/angular/angular.js/issues/7466。