AngularJS :-tekrar ng listesi model bir element modeli diziden işlenmiş güncelleştirildi değil

SORU

18 Mart 2013, PAZARTESİ

AngularJS :-tekrar ng listesi model bir element modeli diziden işlenmiş güncelleştirildi değil

İki denetleyicileri ve bir uygulama ile aralarında veri paylaşımı var.fabrika işlevi. İlk denetleyicisi bağlantı tıklandığında model dizisi (pluginsDisplayed) bir widget ekler. Widget dizi içine itilir ve bu değişim görünüm (ng-repeat dizinin içeriğini gösterir) yansır:

<div ng-repeat="pluginD in pluginsDisplayed">
    <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>

Widget üç direktifleri üzerine, k2plugin, kaldırmak ve yeniden boyutlandırma inşa edilmiştir. Direktif kaldırmak ekler k2plugin Yönetmelik şablonu için bir zaman dilimi. Dedi span tıklandığında, paylaşılan diziye doğru öğe Array.splice() ile silinir. Paylaşılan dizinin doğru biçimde güncelleştirildi, ancak değişiklikdeğilgörünüm yansıttı. Başka bir öğe eklendiğinde, ancak kaldırdıktan sonra, görünümü daha önce silinmiş öğe gösterilmez doğru ve yenilenir.

Ben yanlış ne yapıyorum? Bu çalışmıyor neden bana açıklayabilir misiniz? Daha iyi bir yol Açısal ile yapmaya çalışıyorum ne için var?

Bu benim index.html:

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
    </script>
    <script src="main.js"></script>
  </head>
  <body>
    <div ng-app="livePlugins">
        <div ng-controller="pluginlistctrl">
            <span>Add one of {{pluginList.length}} plugins</span>
            <li ng-repeat="plugin in pluginList">
                <span><a href="" ng-click="add()">{{plugin.name}}</a></span>
            </li>
        </div>
        <div ng-controller="k2ctrl">
            <div ng-repeat="pluginD in pluginsDisplayed">
                <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
            </div>
        </div>
    </div>
  </body>
</html>

Bu benim 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 immediatley. 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: "<div>{{pluginname}} <span resize>_</span> <span remove>X</span>"  
                       "<div>Plugin DIV</div>"   
                  "</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);
        })
    };

});

CEVAP

18 Mart 2013, PAZARTESİ

Ne zaman bazı formu işlemi dışında angularjs, böyle bir ajax çağrısı ile DV veya bağlayıcı bir olay için bir öğe gibi burada izin vermelisin açısal bilmek güncelleme kendisi. Burada yapmanız gereken kod değişikliği:

app.directive("remove", function () {
    return function (scope, element, attrs) {
        element.bind ("mousedown", function () {
            scope.remove(element);
            scope.$apply();
        })
    };

});

app.directive("resize", function () {
    return function (scope, element, attrs) {
        element.bind ("mousedown", function () {
            scope.resize(element);
            scope.$apply();
        })
    };

});

Burada bu dokümanlar şunlardır: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

Bunu Paylaş: