Question

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

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

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

我如何使用角度1.5样式的组件语法？

我能做的一件事就是添加一个绑定，但是我需要指定一个布尔值。我希望我的模板保持原样。

Answer 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>

使用单向绑定（由'＆lt;'表示）控制器实例上的变量'sortable'的值（此处为视图模型命名为vm）将是布尔值true，如果设置如下所示例。如果您的可排序属性当前在模板中包含一个字符串，那么'@'绑定也可能是一个合适的选择。在这种情况下，vm.sortable的值将是一个字符串（如果未在组件标记上定义属性，则为undefined）。

检查仅仅存在可排序属性的方式如下：

bindings: { sortable: '@' }

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

Answer 2

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

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

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

Answer 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

Angular 1.5组件属性存在

3 个答案:

JS

HTML

示例