Angular $ watch问题

时间:2014-10-19 11:06:49

标签: angularjs angular-strap

我有一个控制器,它使用Factory来设置项目列表。在模板中,每个单独的项目都印有一个角带辐射按钮组件:

<ul class="list-group" 
    infinite-scroll="tags.load()" 
    infinite-scroll-disabled='tags.busy' 
    infinite-scroll-distance='1'>
        <li class="list-group-item" 
            ng-repeat="tag in tags.items">
               [[tag.tag]] 
               <span class="badge">[[tag.books.length]]</span>
          <div class="btn-group btn-group-xs" 
               ng-model="button.tagactions" 
               bs-radio-group>
            <label class="btn btn-success">
               <input type="radio" class="btn" 
                      value="approved-[[$index]]">
               Approve
            </label>
            <label class="btn btn-danger">
               <input type="radio" class="btn" 
                      value="rejected-[[$index]]">
               Reject
            </label>
            <label class="btn btn-info">
               <input type="radio" class="btn" 
                      value="new-[[$index]]">
               Restore
            </label>
          </div>
        </li>
</ul>

在我的控制器中,我正在设置工厂,以及对这些无线电按钮的监视:

  $scope.tags = new Tags($scope.button.tagfilter);


  $scope.$watch('button.tagactions', function(newValue, oldValue) {
      console.log(oldValue)
      console.log(newValue)
      if(newValue != oldValue) {

          $scope.tags.changeTagStatus(newValue, function(test,val){

          });
      }
  });

我的工厂:

  tagApp.factory('Tags', function($http,$rootScope) {
  var Tags = function(state) {
    this.items = [];
    this.state = state;

  };

  Tags.prototype.changeTagStatus = function(val) {
      var val = val.split('-');
      var id = this.items[val[1]]._id;
      var path = ...;
      $http.post(path).success(function(data) {
          this.items.splice(val,1);
    }.bind(this));
  }

  Tags.prototype.load = function() {

    if (this.busy) return;
    this.busy = true;

    var path = '/api/rawtags/'+this.state+'/'+(this.items.length)+'/20/frequency';
    $http.get(path).success(function(data) {
        this.items = this.items.concat(data);
        this.busy = false;
    }.bind(this));
  };


  return Tags;
});

现在,当通过删除项目来更新tags.items列表时,$ scope。$ watch(&#39; button.tagactions&#39; ...功能。)

会发生一些非常奇怪的事情。

当我删除第一个项目时,它可以正常工作:使用正确的radiobutton值调用tagactions函数,浏览器中的列表更新,第一个项目缺失。

当我再次单击第一个项目项目(以前是列表中的第二个项目)时,似乎无法更新radiobuttons的值,因为它们仍然反映旧状态。因此,不是第二项,而是删除第三项。

当我再次单击此项目时,我可以跟踪tagactions手表上的两个调用,首先使用正确的radiobutton值注册一个单击,然后在进行任何更新之前使用第一个列表状态中的值进行另一个调用

有什么想法吗?

0 个答案:

没有答案