AngularJS: l’elenco ng-repeat non viene aggiornato quando un elemento del modello è giuntato dall’array del modello

Ho due controller e condivido i dati tra loro con una funzione app.factory.

Il primo controller aggiunge un widget nell’array del modello (pluginsDisplayed) quando viene fatto clic su un collegamento. Il widget viene inserito nell’array e questo cambiamento si riflette nella vista (che utilizza ng-repeat per mostrare il contenuto dell’array):

Il widget è basato su tre direttive, k2plugin, rimuovi e ridimensiona. La direttiva remove aggiunge un’estensione al modello della direttiva k2plugin. Quando viene cliccato su detto intervallo, l’elemento giusto nell’array condiviso viene eliminato con Array.splice() . L’array condiviso viene aggiornato correttamente, ma la modifica non si riflette nella vista. Tuttavia, quando viene aggiunto un altro elemento, dopo la rimozione, la vista viene aggiornata correttamente e l’elemento precedentemente eliminato non viene visualizzato.

Cosa sto sbagliando? Potresti spiegarmi perché questo non funziona? C’è un modo migliore per fare ciò che sto cercando di fare con AngularJS?

Questo è il mio index.html:

         
Add one of {{pluginList.length}} plugins
  • {{plugin.name}}
  • Questo è il mio main.js:

     var app = angular.module ("livePlugins",[]); app.factory('Data', function () { return {pluginsDisplayed: []}; }); app.controller ("pluginlistctrl", function ($scope, Data) { $scope.pluginList = [{name: "plugin1"}, {name:"plugin2"}, {name:"plugin3"}]; $scope.add = function () { console.log ("Called add on", this.plugin.name, this.pluginList); var newPlugin = {}; newPlugin.id = this.plugin.name + '_' + (new Date()).getTime(); newPlugin.name = this.plugin.name; Data.pluginsDisplayed.push (newPlugin); } }) app.controller ("k2ctrl", function ($scope, Data) { $scope.pluginsDisplayed = Data.pluginsDisplayed; $scope.remove = function (element) { console.log ("Called remove on ", this.pluginid, element); var len = $scope.pluginsDisplayed.length; var index = -1; // Find the element in the array for (var i = 0; i < len; i += 1) { if ($scope.pluginsDisplayed[i].id === this.pluginid) { index = i; break; } } // Remove the element if (index !== -1) { console.log ("removing the element from the array, index: ", index); $scope.pluginsDisplayed.splice(index,1); } } $scope.resize = function () { console.log ("Called resize on ", this.pluginid); } }) app.directive("k2plugin", function () { return { restrict: "A", scope: true, link: function (scope, elements, attrs) { console.log ("creating plugin"); // This won't work immediately. Attribute pluginname will be undefined // as soon as this is called. scope.pluginname = "Loading..."; scope.pluginid = attrs.pluginid; // Observe changes to interpolated attribute attrs.$observe('pluginname', function(value) { console.log('pluginname has changed value to ' + value); scope.pluginname = attrs.pluginname; }); // Observe changes to interpolated attribute attrs.$observe('pluginid', function(value) { console.log('pluginid has changed value to ' + value); scope.pluginid = attrs.pluginid; }); }, template: "
    {{pluginname}} _ X" + "
    Plugin DIV
    " + "
    ", replace: true }; }); app.directive("remove", function () { return function (scope, element, attrs) { element.bind ("mousedown", function () { scope.remove(element); }) }; }); app.directive("resize", function () { return function (scope, element, attrs) { element.bind ("mousedown", function () { scope.resize(element); }) }; });