Question

我有一个带状态设置的基本应用，例如：

.....config(function($stateProvider, $urlRouterProvider) {
   $stateProvider
   .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'SearchCtrl as search'
         }
      }
    });
    .....
    $urlRouterProvider.otherwise('/tab/dash');

然后在tab-dash模板中，我有以下内容：

<select class="item item-input" ng-model="formData.category"  ng-options="category as category.name for category in search.categories track by category.id">

SearchCtrl有以下$ watch：

.controller('SearchCtrl', function($scope, service) {
    $scope.$watch('formData.category', function(cat){
      console.log("here");

是的，为简洁起见，这些只是每个文件的摘录。代码结构基于一个离子样本。

控制台在初始页面视图上记录“here”，但是一旦我对“formData.category”进行了选择更改，就没有更多的控制台日志。当我有一个完全相同的代码，在一个简单的1 html页面（非离子）角应用程序，我没有这个问题。 $ watch会检测到任何变化，但现在不会。

这真的是我的目标。

有什么想法吗？

由于

Answer 1

你能试试下面的吗？

$scope.$watch('formData.category', function (newVal, oldVal) {   console.log("here"); }, true);

请注意第三个参数（true）。

Angular documentation

从文档，objectEquality（可选）比较使用的对象相等性 angular.equals而不是比较参考相等。

如果上述技巧不起作用，您也可以尝试以下方法。

 $scope.$watch(function ( $scope ) {
      return $scope.formData.category;
    }, function(newVal, oldVal){
        if(newVal != oldVal) {
            console.log('here');

        }
    });

请你试试ng-change

   <select class="item item-input" ng-model="formData.category"  ng-options="category as category.name for category in search.categories track by category.id" ng-change="valueChanged()">

     $scope.valueChanged = function(){
// you can do what you are doing in $watch 
         console.log("here");
      }

Answer 2

我用一些很好的旧时尚头撞出了答案，我将以下一行添加到了＆＃39; SearchCtrl＆＃39;的顶部。控制器：

我不确定为什么这个对象（或数组）声明在我的单个html页面，单控制器常规角度js应用程序上是不必要的，但在这里似乎是必要的。

任何解释都会非常感激。

Angular JS $ scope $ watch问题 - 离子框架

2 个答案: