AngularJS在模板功能中访问绑定



我已经创建了一个组件来渲染基本的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>

问题是$ attr.componenttype给了我属性值,这是var的名称,因此它根本没有帮助我。有人可以帮我吗?

不可能评估AngularJ中的属性结合。请参阅https://github.com/angular/angular.js/issues/7466。

最新更新