Почему этот ng-click работает с функцией, но не с этими значениями?

У меня есть следующий html:

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        {{myValue}} 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li ng-repeat="value in valueList">
            <button class="btn btn-link" ng-click="myValue = value.key">
                {{value.key}}
            </button>
        </li>
   </ul>
</div>

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

$scope.valueList = [ { key: "A" }, { key: "B" } ];
$scope.myValue = $scope.valueList[0].key;

Это возвращает раскрывающийся список, начинающийся с «A», где «A» и «B» являются вариантами.

Теперь приведенный выше html НЕ превратит myValue в «B» при нажатии раскрывающейся кнопки. Однако, когда я меняю ng-click на ng-click="changeValue(value.key)", он работает, как и ожидалось. Почему myValue = value.key ничего не делает, а {{ value.key }} показывает правильные вещи?

Функция для полноты:

$scope changeValue = function(valueKey) { 
    $scope.myValue = valueKey 
}

javascript dropdown angularjs twitter-bootstrap
person Patrick    schedule 09.08.2017    source источник
comment
Кажется, это связано с этим вопросом: stackoverflow.com/questions/16736804/   -  person Kyle Olson    schedule 09.08.2017

Ответы (1)


arrow_upward
4
arrow_downward

Потому что ng-repeate создает новую область, а myValue выходит за рамки. поэтому, если вы используете синтаксис controllerAs, он работает правильно.

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var vm = this;
  vm.valueList = [{
    key: "A"
  }, {
    key: "B"
  }];
  vm.myValue = vm.valueList[0].key;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl as vm">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        {{vm.myValue}} 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li ng-repeat="value in vm.valueList">
        <button class="btn btn-link" ng-click="vm.myValue = value.key">
                {{value.key}}
            </button>
      </li>
    </ul>
  </div>
</div>

person Hadi J    schedule 09.08.2017
comment
Я нашел другое решение, которое предлагает функцию $scope.getScope = function () { return $scope; }, а затем превращает щелчок в ng-click ="getScope.myValue = value.key" Какое из этих решений будет считаться лучшим и почему? - person Patrick; 09.08.2017
comment
да, это другое решение. но лучше использовать синтаксис controllerAs. потому что вы также используете другое преимущество этого синтаксиса. - person Hadi J; 09.08.2017