Переключить свойство типа кнопки с помощью OnsenUI/AngularJS

Я пытаюсь сделать несколько кнопок переключения с помощью OnsenUI. Я просто хочу, чтобы состояния переключения были представлены кнопкой свойства ons-button type="" (normal) или type="quiet".

Логика кажется довольно простой, plunkr находится здесь: http://plnkr.co/edit/25Y9KSfSv2Ket5gHzcjI?p=preview с приведенным ниже HTML-кодом:

<ons-button 
    type="{{buttonType()}}"
    ng-click="!bool"
    >
    button type {{buttonType()}}
</ons-button>

И контроллер:

app.controller('MyController', function($scope) {

  $scope.bool = false;

  $scope.buttonType = function() {
    if ($scope.bool) {
      return ''; //normal button
    } else {
      return 'quiet';  //quiet button
    }
  }    

});

Однако я попытался переключиться с ng-class, та же проблема; кнопка не обновляется после первоначального отображения на странице (и, по-видимому, не обновляется ни с какими обновлениями дайджеста).

Естественно, сначала я пробовал это с помощью флажков, однако мне не удалось избежать задержки клика в 300 мс на мобильных устройствах. (Я знаю, что OnsenUI использует Fastclick, но, похоже, он вообще ничего не делает на Android, а флажки на iOS все еще медленные, поэтому я пытаюсь переключать кнопки и на самом деле могу предпочесть этот метод, если он будет работать.)

Я делаю что-то неправильно?

Спасибо за чтение.


angularjs onsen-ui
person markau    schedule 11.07.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, вы на самом деле не меняете значение $scope.bool на этом ng-click. Вы должны сделать ng-click="bool = !bool". Планкер: http://plnkr.co/edit/08sgrG57yym82l6WSDrO?p=preview

person javiercejudo    schedule 11.07.2014
comment
Ах, да, это было глупо, это упрощение моего фактического кода (который действительно меняет переменную области видимости). Спасибо что подметил это. Тем не менее, я заметил, что type= не обновляется при обновлении переменной области видимости. Свойства кнопки, по-видимому, привязаны к странице при загрузке представления и неизменяемы в течение всего срока действия представления. - person markau; 11.07.2014
comment
Я должен был заметить, что было что-то еще. У меня нет опыта работы с onsen-ui, поэтому я не могу сказать, возможно ли то, что вы хотите, но в худшем случае вы можете иметь две кнопки и переключаться между ними. - person javiercejudo; 11.07.2014
comment
Спасибо, да, я также рассматриваю возможность добавления стиля кнопки к стандартной кнопке html, где свойства более динамичны. - person markau; 11.07.2014

arrow_upward
0
arrow_downward

Очевидно, что это выходит за рамки функциональности директивы пользовательской кнопки.

Я использовал стандартную HTML-кнопку с двумя классами CSS; напоминающий кнопку-верхнее покрытие и кнопку-верхнее покрытие - тихий, и для переключения между ними использовался ng-класс.

person markau    schedule 11.07.2014