当模型元素从模型数组拼接时,AngularJS:ng-repeat列表不更新

前端之家收集整理的这篇文章主要介绍了当模型元素从模型数组拼接时,AngularJS:ng-repeat列表不更新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个控制器,并在它们之间用app.factory函数共享数据。

当单击链接时,第一个控制器在模型数组(pluginsDisplayed)中添加一个小部件。窗口小部件被推入数组,并且此更改反映到视图中(使用ng-repeat显示数组内容):

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

该小部件建立在三个指令,k2plugin,删除和调整大小。 remove指令将一个范围添加到k2plugin指令的模板中。当单击所述跨度时,使用Array.splice()删除共享数组中的正确元素。共享阵列已正确更新,但更改不会反映在视图中。但是,当添加另一个元素时,在删除后,视图会正确刷新,并且不会显示先前删除的元素。

我错了什么?你能解释我为什么这不工作吗?
有没有更好的方法来做我想使用AngularJS?

这是我的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>

这是我的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",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: "<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 () {
            scope.resize(element);
        })
    };
});
每当你在AngularJS之外做一些形式的操作,比如使用jQuery调用Ajax,或者将一个事件绑定到一个像你这样的元素,你需要让AngularJS知道更新自己。这里是你需要做的代码更改:
app.directive("remove",function () {
            scope.remove(element);
            scope.$apply();
        })
    };

});

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

这里是文档:https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

猜你在找的Angularjs相关文章