AngularStrap bs-select not updating ng-model

问题

I'm using AngularStraps bs-select directive to add a multiple choice select button to one of my views. I'm trying to watch the values in this select box and run a search any time the values change.

My select button looks like this.

<button type="button" class="btn btn-primary" ng-model="subject_list" data-multiple="1"
  data-placeholder="All subjects" ng-options="subject.id as subject.name for subject in subjects" bs-select>
  Action <span class="caret"></span>
</button>

The problem is that $scope.subject_list never gets populated. The selection seems to work fine, and the ui all looks good, but ng-model never gets populated with anything.

In my controller, I initialize $scope.subject_list to an empty array, and then have a $watch function checking to see when it changes. Nothing ever gets fired. I even wrote a little function to print out the value of $scope.subject_list ever second, and it's always empty.

$scope.subject_list = [];
$scope.$watch('subject_list', $scope.update_search);
$scope.update_search = function(){
  console.log($scope.subject_list);
};

Any thoughts as to what's going on? I had this working at one point, so I'm either doing something silly, or a recent update broke things.

Update

This seems to be a scope inheritance issue. I've got all kinds of scopes going on, which could be part of the problem. However, I was able to get this working by doing everything on the rootScope. So...

<button type="button" class="btn btn-primary" ng-model="$root.subject_list" data-multiple="1"
  data-placeholder="All subjects" ng-options="subject.id as subject.name for subject in subjects" bs-select>
  Action <span class="caret"></span>
</button>

and

$rootScope.subject_list = [];
$rootScope.$watch('subject_list', function(){
    console.log('change');
});

I'm sure this isn't the best way to do this, but I can't figure out what's wrong with my scopes.

回答1:

The problem here came down to a scoping issue. I was using ui.router and the $stateProvider with lots of nested states and views.

I had one abstract state, which I set the controller in for all sub states.

.state('profiles.search',{
    url: '/search',
    abstract: true,
    template: '<ui-view/>',
    controller: 'SearchCtrl'
  })

  .state('profiles.search.classrooms', {
    url: '/classrooms',
    templateUrl: 'views/classrooms/search.html',
    data: {
      update_classrooms: true
    }
  })

What I didn't realize is, is that when the templateUrl for the 'profiles.search.classroom' state is rendered, it gets its own scope, that is inherited from the 'profiles.search' scope, where all my scope variables live in SearchCtrl.

So, I can initialize data from SearchCtrl, but it doesn't bind back from the view, because it is its own scope.

Moral of the story, make sure you know which scope you're working in.

回答2:

I had this problem too on one of the bs-selects on page, but not the other. Turned out that if you assigned the ng-model to a property on an object on your scope it works fine. i.e:

ng-model="props.selecteditem"

when

$scope.props = {
    selecteditem: ''
}

did the trick.

来源：https://stackoverflow.com/questions/25129947/angularstrap-bs-select-not-updating-ng-model