$ mirar un objeto

Quiero ver los cambios en un diccionario, pero por alguna razón no se llama a la devolución de llamada.

Aquí hay un controlador que uso:

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

    $scope.$watch('form', function(newVal, oldVal){
        console.log('changed');
    });
}

Aquí está el violín .

Espero que la devolución de llamada $ watch se active cada vez que se cambia el nombre o el apellido, pero no sucede.

¿Cuál es la forma correcta de hacerlo?

Llame $watchcon truecomo tercer argumento:

$scope.$watch('form', function(newVal, oldVal){
    console.log('changed');
}, true);

Por defecto, al comparar dos objetos complejos en JavaScript, se verificará la igualdad de "referencia", que pregunta si los dos objetos se refieren a la misma cosa, en lugar de la igualdad de "valor", que verifica si los valores de todas las propiedades de esos Los objetos son iguales.

Según la documentación angular , el tercer parámetro es para objectEquality:

Cuando objectEquality == true, la desigualdad de watchExpression se determina de acuerdo con la angular.equalsfunción. Para guardar el valor del objeto para una comparación posterior, angular.copyse utiliza la función. Por lo tanto, esto significa que observar objetos complejos tendrá implicaciones adversas de memoria y rendimiento.

El formobjeto no cambia, solo la namepropiedad es

violín actualizado

function MyController($scope) {
$scope.form = {
    name: 'my name',
}

$scope.changeCount = 0;
$scope.$watch('form.name', function(newVal, oldVal){
    console.log('changed');
    $scope.changeCount++;
});
}

Poco consejo de rendimiento si alguien tiene un tipo de servicio de almacén de datos con clave -> pares de valores:

Si tiene un servicio llamado dataStore , puede actualizar una marca de tiempo cada vez que cambie su objeto de big data. De esta manera, en lugar de observar todo el objeto en profundidad, solo está viendo una marca de tiempo para el cambio.

app.factory('dataStore', function () {

    var store = { data: [], change: [] };

    // when storing the data, updating the timestamp
    store.setData = function(key, data){
        store.data[key] = data;
        store.setChange(key);
    }

    // get the change to watch
    store.getChange = function(key){
        return store.change[key];
    }

    // set the change
    store.setChange = function(key){
        store.change[key] = new Date().getTime();
    }

});

Y en una directiva solo estás viendo cómo cambia la marca de tiempo

app.directive("myDir", function ($scope, dataStore) {
    $scope.dataStore = dataStore;
    $scope.$watch('dataStore.getChange("myKey")', function(newVal, oldVal){
        if(newVal !== oldVal && newVal){
            // Data changed
        }
    });
});

La razón por la cual su código no funciona es porque, $watchde manera predeterminada, hace una verificación de referencia. En pocas palabras, asegúrese de que el objeto que se le pasa es un objeto nuevo. Pero en su caso, solo está modificando alguna propiedad del objeto de formulario para no crear una nueva. Para que funcione, puede pasar truecomo tercer parámetro.

$scope.$watch('form', function(newVal, oldVal){
    console.log('invoked');
}, true);

Funcionará, pero puede usar $ watchCollection, que será más eficiente que $ watch porque $watchCollectionbuscará propiedades poco profundas en el objeto de formulario. P.ej

$scope.$watchCollection('form', function (newVal, oldVal) {
    console.log(newVal, oldVal);
});

Mientras busca cambios en los objetos de formulario, el mejor enfoque de observación es usar
$watchCollection. Consulte la documentación oficial para conocer las diferentes características de rendimiento.

Prueba esto:

function MyController($scope) {
    $scope.form = {
        name: 'my name',
        surname: 'surname'
    }

    function track(newValue, oldValue, scope) {
        console.log('changed');
    };

    $scope.$watch('form.name', track);
}

Para cualquiera que quiera ver un cambio en un objeto dentro de una matriz de objetos, esto pareció funcionar para mí (ya que las otras soluciones en esta página no lo hicieron):

function MyController($scope) {

    $scope.array = [
        data1: {
            name: 'name',
            surname: 'surname'
        },
        data2: {
            name: 'name',
            surname: 'surname'
        },
    ]


    $scope.$watch(function() {
        return $scope.data,
    function(newVal, oldVal){
        console.log(newVal, oldVal);
    }, true);

debes cambiar en $ watch ....

function MyController($scope) {
    $scope.form = {
        name: 'my name',
    }

    $scope.$watch('form.name', function(newVal, oldVal){
        console.log('changed');
     
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app>
    <div ng-controller="MyController">
        <label>Name:</label> <input type="text" ng-model="form.name"/>
            
        <pre>
            {{ form }}
        </pre>
    </div>
</div>