Question

我正在尝试创建一个从其他地方加载数据的指令。

这是我的指示：

(function() {
    var module = angular.module('HomeModule', ['StorageService']);
    module.directive("home", ['storage',
        function(storage) {
            return {
                restrict: 'A',
                templateUrl: "modules/home/directives/home-directive.html",
                controllerAs: "mediaCtrl",
                controller: function() {
                    var ctrl = this;
                    ctrl.medias = [];
                    storage.get_all(function(items) {
                        var tmp = [];
                        for (id in items) {
                            tmp.push(items[id]);
                        }
                        ctrl.medias = tmp;
                    });

                    // setTimeout(function() {
                    //     ctrl.medias = [{name: "test"}];
                    // }, 3000);
                }
            };
        }
    ]);
})();

我的模板：

<input type="search" ng-model="search.name" placeholder="filter medias..." />
<ul>
    <li ng-repeat="media in mediaCtrl.medias | filter:search" >
        {{media.name}}
    </li>
</ul>

我不明白的是，只要我在过滤器中输入内容，它就会更新，然后显示数据。我甚至尝试使用setTimeout来查看问题是否是我的自定义服务但是没有。

Answer 1

您可以将数据更新函数包装在$ scope。$ apply（）调用中，如下所示：

storage.get_all(function(items) {
    $scope.$apply(function () {
        var tmp = [];
        for (id in items) {
            tmp.push(items[id]);
        }
        ctrl.medias = tmp;
    });

});

Angular.js指令以双向绑定方式加载数据

1 个答案: