javascript - directivas - limitto angular 6

$ watch''ing para cambios de datos en una directiva Angular

Question

¿Cómo puedo disparar una variable $watch en una directiva angular cuando manipulo los datos dentro (por ejemplo, insertar o eliminar datos), pero no asignar un nuevo objeto a esa variable?

Tengo un conjunto de datos simple que se está cargando actualmente desde un archivo JSON. Mi controlador Angular hace esto, así como también define algunas funciones:

App.controller(''AppCtrl'', function AppCtrl($scope, JsonService) {
// load the initial data model
if (!$scope.data) {
JsonService.getData(function(data) {
$scope.data = data;
$scope.records = data.children.length;
});
} else {
console.log("I have data already... " + $scope.data);
}
// adds a resource to the ''data'' object
$scope.add = function() {
$scope.data.children.push({ "name": "!Insert This!" });
};
// removes the resource from the ''data'' object
$scope.remove = function(resource) {
console.log("I''m going to remove this!");
console.log(resource);
};
$scope.highlight = function() {
};
});

Tengo un <button> que correctamente llamó a la función $scope.add , y el nuevo objeto se inserta correctamente en el conjunto $scope.data . Una tabla que configuré se actualiza cada vez que presiono el botón "agregar".

<table class="table table-striped table-condensed">
<tbody>
<tr ng-repeat="child in data.children | filter:search | orderBy:''name''">
<td><input type="checkbox"></td>
<td>{{child.name}}</td>
<td><button class="btn btn-small" ng-click="remove(child)" ng-mouseover="highlight()"><i class="icon-remove-sign"></i> remove</button></td>
</tr>
</tbody>
</table>

Sin embargo, una directiva que configuré para ver $scope.data no se $scope.data cuando ocurre todo esto.

Defino mi etiqueta en HTML:

<d3-visualization val="data"></d3-visualization>

Que está asociado con la siguiente directiva (recortada para la cordura de la pregunta):

App.directive(''d3Visualization'', function() {
return {
restrict: ''E'',
scope: {
val: ''=''
},
link: function(scope, element, attrs) {
scope.$watch(''val'', function(newValue, oldValue) {
if (newValue)
console.log("I see a data change!");
});
}
}
});

Obtengo el mensaje "I see a data change!" mensaje al principio, pero nunca después cuando presiono el botón "agregar".

¿Cómo puedo activar el evento $watch cuando solo agrego / elimino objetos del objeto de data , sin obtener un nuevo conjunto de datos para asignar al objeto de data ?

Answer 1

Debe habilitar la comprobación sucia de objetos profundos. De forma predeterminada, angular solo verifica la referencia de la variable de nivel superior que observa.

App.directive(''d3Visualization'', function() {
return {
restrict: ''E'',
scope: {
val: ''=''
},
link: function(scope, element, attrs) {
scope.$watch(''val'', function(newValue, oldValue) {
if (newValue)
console.log("I see a data change!");
}, true);
}
}
});

ver Scope . El tercer parámetro de la función $ watch permite una verificación profunda y sucia si se establece en verdadero.

Tenga en cuenta que la verificación profunda y sucia es costosa . Por lo tanto, si solo necesita ver la matriz de elementos secundarios en lugar de toda data variable de data , mire directamente la variable.

scope.$watch(''val.children'', function(newValue, oldValue) {}, true);

la versión 1.2.x presentó $watchCollection

Shallow observa las propiedades de un objeto y dispara cada vez que cambia alguna de las propiedades (para las matrices, esto implica observar los elementos de la matriz; para los mapas de objetos, esto implica observar las propiedades)

scope.$watchCollection(''val.children'', function(newValue, oldValue) {});

Answer 2

Mi versión para una directiva que usa jqplot para trazar los datos una vez que estén disponibles:

 app.directive(''lineChart'', function() {
$.jqplot.config.enablePlugins = true;
return function(scope, element, attrs) {
scope.$watch(attrs.lineChart, function(newValue, oldValue) {
if (newValue) {
// alert(scope.$eval(attrs.lineChart));
var plot = $.jqplot(element[0].id, scope.$eval(attrs.lineChart), scope.$eval(attrs.options));
}
});
}
});

Answer 3

Porque si quieres desencadenar tus datos con profundidad, tienes que pasar el tercer argumento true de tu oyente. Por defecto es false y significa que tu función se disparará, solo cuando tu variable cambie, no su campo .