angularjs - Angular 1.5 组件属性存在

Question

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

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

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

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

我可以做的一件事是添加绑定(bind)，但随后我需要指定 bool 值。我想保持我的模板不变。

Answer 1

使用绑定(bind)而不是直接引用 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>

使用单向绑定(bind)(由“<”表示)，如果按示例中所示进行设置， Controller 实例(此处为 View 模型命名为 vm)上的变量“sortable”的值将是 bool 值 true 。如果您的可排序属性当前在模板中包含字符串，则“@”绑定(bind)也可能是合适的选择。在这种情况下，vm.sortable 的值也将是一个字符串(如果未在组件标记上定义该属性，则该值也是未定义的)。

检查是否存在可排序属性的工作原理如下:

bindings: { sortable: '@' }

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