В Angular 1.5, как связать компонент атрибута как boolean?
Я хотел бы знать, есть ли в Angular 1.5, когда вы используете компоненты, простой способ связать атрибут, который является логическим без преобразования в строку с @.
например, у меня есть два компонента "app-menu" и "app-menuitem" без трансклюдии. "app-menu "имеет только один атрибут-это список элементов для создания"app-menuitem".
<app-menu items="menuitems">
в menuitems, который является json, у вас есть атрибут menuitem с именем "isactive", который является логическим значение.
$scope.menuitems = [{ label : 'menuitem 1', isactive : true},{ label : 'menuitem 1', isactive : false}]
в компоненте меню :
angular.module('app')
.component('appMenuitem', {
transclude: false,
controller: menuitemController,
bindings: {
label: '@',
isactive: '@' //<--- The problem is here because the boolean is converted as string
},
templateUrl: 'angular/components/simple/menuitem/menuitem.html'
});
Я не знаю, лучший способ быть уверенным в конце-это реальное логическое, а не строка, которая делает меня некоторыми ошибками. У кого какие идеи ?
3 ответов
в angular 1.5 и далее вы можете использовать <
& @
для односторонней привязки. Основная разница между этими двумя является <
имеет возможность передать объект с его исходным типом данных компоненту.
isactive: '<'
просто используйте одностороннюю привязку вместо привязки строки:
angular.module('app')
.component('appMenuitem', {
transclude: false,
controller: menuitemController,
bindings: {
label: '@',
isactive: '<'
},
templateUrl: 'angular/components/simple/menuitem/menuitem.html'
});
<
заставляет вас использовать true
и false
для ваших значений атрибутов, которые не совсем похожи на HTML. Например, мы часто пишем:
<input type="text" disabled>
вместо
<input type="text" disabled="disabled">
чтобы продолжить делать это с вашими компонентами AngularJS, вы можете использовать @
связывание с parse-string-boolean (или похожие) в $onChanges
:
bindings: {
paramSomething: '@something'
}
,
function $onChanges(changes) {
if (changes.paramSomething) {
switch (typeof this.paramSomething) {
case 'string': {
this.isSomething = parseBoolean(this.paramSomething, true);
break;
}
case 'undefined': {
this.isSomething = false;
break;
}
}
}
,
<my-component something></my-component>