Angular.js指令與加載數據的兩種方式綁定

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;
    });

});