javascript - watch() 函数在 json 调用上无法正常工作 angular.js

Question

我想在 $http.selectedSong (模型值)更改时执行一个方法，但我似乎无法让它工作，有什么想法吗？ :

app.controller('songController', ['$http', function($http) {

    $songs = this;
    $songs.tracks = [];

    $http({
            url: "http://api.q-music.be/1.2/tracks/plays?limit=20",
            dataType: "jsonp",
            jsonp: "callback"
        })
        .success(function(lastSongsList) {

            $http.$watch('selectedSong', function (newVal, oldVal) {
                 if (newVal !== oldVal) {
                    alert('hej');
                 }
            });
        });

}]);

我的目标是处理从这个 html 代码中获得的数据:

<select ng-model="selectedSong"  ng-init="selectedSong === songs.tracks[0].title" ng-options="song as song.title for song in songs.tracks"></select>

我想看看我在“选择”中选择的值何时发生变化，以便我可以使用该值来执行方法等...

Answer 1

$watch是 $scope 独有的构造。服务。

我假设您正在使用 controller as 语法，在这种情况下，您不会在 Controller 中直接使用 $scope 。但是，您可以设置 ng-change每当绑定(bind)模型更改时执行任意代码的指令。

<select ng-model="ctrl.selectedSong" ng-change="ctrl.doStuff()">

这最终是比使用 $watch 更干净的选择

这是基于上面示例的工作片段

(function() {
  'use strict';

  function InputController() {
    var vm = this;
    vm.songs = ['Uptown Funk!', 'Thinking Out Loud','Take Me To Church','Blank Space'];
    vm.selectedSong = vm.songs[0];

    vm.onSongChange = function() {
      alert(vm.selectedSong);
    };
  }

  angular.module('inputs', [])
    .controller('InputCtrl', InputController);

}());

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<div class="container" ng-app="inputs" ng-controller="InputCtrl as ctrl">
  <div class="row">
    <div class="col-xs-6">
      <h3>Primary</h3>
      <select class="form-control" ng-model="ctrl.selectedSong" ng-options="song for song in ctrl.songs" ng-change="ctrl.onSongChange()"></select>
    </div>
  </div>
</div>