Angular 1.5 组件属性存在

Posted 2023-02-23

【中文标题】Angular 1.5 组件属性存在

【英文标题】：Angular 1.5 component attribute presence

【发布时间】：2016-09-23 03:11:29

【问题描述】：

我正在将一些角度指令重构为角度 1.5 样式的组件。

我的一些指令的行为取决于存在的某个属性，因此没有具有特定布尔值的属性。使用我的指令，我使用链接函数完成此操作：

link: function(scope,elem,attrs, controller)
      controller.sortable = attrs.hasOwnProperty('sortable');
    ,

我将如何使用 Angular 1.5 样式的组件语法来做到这一点？

我可以做的一件事是添加一个绑定，但是我需要指定布尔值。我想保持我的模板不变。

【问题讨论】：

将$attrs 注入您的控制器。

【参考方案1】：

使用绑定而不是直接引用 DOM 属性：

angular.module('example').component('exampleComponent', 
  bindings: 
    sortable: '<'
  ,
  controller: function() 
    var vm = this;
    var isSortable = vm.sortable;
  ,
  templateUrl: 'your-template.html'
);

模板：

<example-component sortable="true"></example-component>

使用单向绑定（由“

检查 sortable 属性是否存在的工作方式如下：

bindings:  sortable: '@' 

// within the controller:
var isSortable = vm.sortable !== undefined;

【参考方案2】：

如果您尝试检查是否存在没有值的属性，则使用绑定可能会起作用。如果您不关心该值，您可以通过在控制器上注入 $element 来检查它是否存在。

angular
    .module('yourModule')
    .component('yourComponent', 
        templateUrl: 'your-component.component.html',
        controller: yourComponentsController
    );

function yourComponentController($element) 
    var sortable = $element[0].hasAttribute("sortable");

【参考方案3】：

有一种内置方法可以通过将$attrs 注入控制器来执行此操作。

JS

function MyComponentController($attrs) 

    this.$onInit = function $onInit() 
        this.sortable = !!$attrs.$attr.hasOwnProperty("sortable");
    



angular
    .module("myApp", [])
    .component("myComponent", 
        controller: [
            "$attrs",
            MyComponentController
        ],
        template: "Sortable is  ::$ctrl.sortable "
    );

HTML

<my-component sortable>

</my-component>

<my-component>

</my-component>

示例

JSFiddle