2 способа привязки данных не работает

Question

2 способа привязки данных не работает

0

Я пишу простой контроллер, который делает несколько расчетов. Это отражение реального проекта с более подробной информацией. Проблема в том, что результат, когда он помещен в html как выражение, пересчитывается с каждым изменением, однако, когда я вычисляю в переменной $ scope как переменную, она не обновляется. см. комментарий в разметке.

Любая идея, что мне здесь не хватает?

наценка

<body ng-app="myApp"> 
<div ng-controller="mainController">
  <h3> Numbers </h3> 
  <label> a </label>
  <input type="number" ng-model="numbers.a"/>

  <label> b </label> 
  <input type="number" ng-model="numbers.b">
<br>
<br>
  <span> Result : {{result}} {{numbers.a*numbers.b}} </span> // the first one does not update, but the second does. 

  <h3> Nums </h3> 

    <label> a </label>
  <input type="number" ng-model="a1">

  <label> b</label> 
  <input type="number" ng-model="b1">

<br>  
  Result2:  {{result2}} {{a1+b1}}
<ul> 
  <li ng-repeat=" i in cool"> {{i}} </li>
  </ul>
  </div>
</body>

JavaScript:

angular.module('myApp',[])

.controller('mainController', ['$scope', function($scope) {
  $scope.numbers = {a:11, b:10}; 
  $scope.a1 = 5; 
  $scope.b1 = 7; 
  $scope.result = $scope.numbers.a*$scope.numbers.b; 
  $scope.result2 = $scope.a1 +$scope.b1 ;

  $scope.cool = [$scope.result + $scope.result2, 
               $scope.result - $scope.result2]
}]);

http://codepen.io/Tallyb/pen/rVdebm

Tally Barak 06 июль 2015, в 10:50

Источник

Теги:

javascript

angularjs

angular-data

3 ответа

Ещё вопросы

riptidebyte · Answer 1 · 2015-07-06T06-08-00.000Z

Первый result переменной не обновляется, так mainController функция mainController оценивается только один раз - это первый раз, когда угловой интерпретирует html и сначала обнаруживает выражение ng-controller="mainController".

Чтобы получить result для автоматического обновления, вам необходимо настроить прослушиватели часов в контроллере следующим образом:

angular.module('myApp',[])

.controller('mainController', ['$scope', function($scope) {
  // ...
  $scope.$watch('[numbers.a, numbers.b]', function () {
    $scope.result = $scope.numbers.a*$scope.numbers.b;
  });

}]);

Выражение типа {{numbers.a*numbers.b}} будет обновляться автоматически, потому что угловые будут настраивать наблюдателей для них. На самом деле синтаксис выражения в html - это просто синтаксический сахар - под капотом угловые просто запускают одни и те же функции $watch для каждого выражения, которое оно находит в html.

Подробнее см. Документацию на $ watch.

Я лично предпочитаю не использовать синтаксис $watch упомянутый выше, потому что он раздувает контроллер. Кроме того, вы можете вызвать функцию из своего html:

{{ calculateResult() }}

В вашем контроллере вы затем определяете функцию следующим образом:

angular.module('myApp',[])

.controller('mainController', ['$scope', function($scope) {
  // ...
  $scope.calculateResult = function () {
    return $scope.numbers.a*$scope.numbers.b;
  };

}]);

Примечание: если вы обеспокоены производительностью, и функция calculateResult() работает очень медленно, вы можете захотеть придерживаться первой версии.

Remigius Stalder · Answer 2 · 2015-07-06T05-53-00.000Z

Вычисления в контроллере выполняются только при создании экземпляра контроллера, как правило, при отображении соответствующего представления. Вам нужно будет инкапсулировать вычисления в функции (нет необходимости в $ watch):

$scope.result = function() {
  return $scope.numbers.a * $scope.numbers.b;
}
$scope.result2 = function() {
  return $scope.a1 + $scope.b1;
}
$scope.cool = function() {
  return [
    $scope.result() + $scope.result2(),
    $scope.result() - $scope.result2()
  ];
}

и ссылайтесь на него в своем представлении:

<span> Result : {{result()}} {{numbers.a*numbers.b}} </span>

а также:

Result2:  {{result2()}} {{a1+b1}}

а также:

<li ng-repeat=" i in cool(result, result2)"> {{i}} </li>

см.: http://codepen.io/anon/pen/vORXpg

Arun P Johny · Answer 3 · 2015-07-06T07-17-00.000Z

Вам понадобятся часы для пересчета значения результата при изменении номеров. В противном случае значение result вычисляется только один раз

var app = angular.module('my-app', [], function() {})

app.controller('mainController', ['$scope',
  function($scope) {
    $scope.numbers = {
      a: 11,
      b: 10
    };
    $scope.a1 = 5;
    $scope.b1 = 7;

    //if a or b is changed recalculate result
    $scope.$watch('[numbers.a, numbers.b]', function() {
        $scope.result = $scope.numbers.a * $scope.numbers.b;
      })
      //if a1 or b1 is changed recalculate result2
    $scope.$watch('[a1, b1]', function() {
      $scope.result2 = $scope.a1 + $scope.b1;
    })

    //if result or result2 is changed recalculate cool
    $scope.$watch('[result, result2]', function() {
      $scope.cool = [$scope.result + $scope.result2,
        $scope.result - $scope.result2
      ]
    })
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="mainController">
    <h3> Numbers </h3> 
    <label>a</label>
    <input type="number" ng-model="numbers.a" />

    <label>b</label>
    <input type="number" ng-model="numbers.b" />
    <br/>
    <br/>
    <span> Result : {{result}} {{numbers.a*numbers.b}} </span> // the first one does not update, but the second does.

    <h3> Nums </h3> 

    <label>a</label>
    <input type="number" ng-model="a1" />

    <label>b</label>
    <input type="number" ng-model="b1" />

    <br/>Result2: {{result2}} {{a1+b1}}
    <ul>
      <li ng-repeat=" i in cool">{{i}}</li>
    </ul>
  </div>
</div>