Переключатель в Angular Reactive formArray - Выберите один элемент в массиве

Проблема с вашим кодом заключается в том, что вы объявляете $widget в области окна, поэтому ваш контроллер печатает последнее значение, поскольку он был переопределен каждый раз, когда контроллер получал экземпляр. Используйте var $widget, а ваш код будет работать нормально.

Следующий фрагмент решает эту проблему:

angular.module('app', [])
  .component('widgetList', {
    templateUrl: 'template/widget/widget-list.html',
    bindings: {
      title: '@',
    },
    controllerAs: '$widget',
    controller: WidgetListController
  });

function WidgetListController($timeout) {

  var $widget = this;

  console.log('Title on init: ', $widget.title)

  $timeout(function() {
    console.log('Title after 3 seconds: ', $widget.title)
  }, 3000)

  $widget.doSomething = function() {
    $widget.content = "Something";
  }
}

angular.element(document).ready(function() {
  angular.bootstrap(document, ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<widget-list title="Books" class="col-xs-12 col-md-4">
</widget-list>

<widget-list title="Movies" class="col-xs-12 col-md-4">
</widget-list>

<widget-list title="Albums" class="col-xs-12 col-md-4">
</widget-list>

<script type="text/ng-template" id="template/widget/widget-list.html">
  <div class="widget widget-list">
    <div class="panel b-a">

      <div class="panel-heading b-b b-light">
        <h5>{{$widget.title}}</h5>
        <div class="pull-right">
          <button type="button" class="btn btn-default btn-sm" ng-click="$widget.doSomething()">
            Do something
          </button>
        </div>
      </div>

      <div class="panel-content">
        {{$widget.content || 'No content'}}
      </div>

    </div>
  </div>
</script>

0
задан B.Balamanigandan 28 March 2019 в 05:25
поделиться