指令初始化和加载数据后调用函数

Question

我对AngularJs中的指令有一个疑问，因为我似乎不完全理解它们。

接下来的情况是：

1)有一项指令：

// directive
function myDir() {
    var directive = {
        restrict: 'A',
        replace: false,
        transclude: false,
        templateUrl: '/js/shared/directives/myDir/myDir.html',
        controller: 'myDirController',
        scope: {
            myDir: '='
        }
    };
    return directive;
}

2)该指令允许执行以下一些操作：

// directive controller
function myDirController($scope) {
    var something = {};
    var whatevers = [];

    $scope.myDir = {
        createSmth: createSmth,
        setSmthOptions: setSmthOptions,
        addWhatever: addWhatever,
        removeWhatever: removeWhatever
    };

    function createSmth() {
        something = {
            someOption1: someDefaultValue1,
            someOption2: someDefaultValue2,
            someOption3: someDefaultValue3,
        };
    }

    function setSmthOptions(options) {
        angular.extend(something, options);
    }

    function addWhatever(options) {
        var newWhatever = {
            someOption1: someDefaultValue1,
            someOption2: someDefaultValue2,
            anotherOptions: options
        };

        whatevers.push(newWhatever);
    }

    function removeWhatever(whatever) {
        var idx = whatevers.indexOf(whatever);
        whatevers.splice(idx, 1);
    }
}

3)该指令的激活功能是：

activate()
function activate() {
    createSomething();
}

有一页，我用这个指令：

// html
...
<div my-dir="vm.myDir"></div>
...

// controller
...
vm.id = $routeParams.id;
...

activate();
function activate() {
    $q.when(loadData()).then(function() {
        initSomething();
    });
}

function loadData() {
    if (!id) {
        vm.model = {
            data: []
        };
        return null;
    } else {
        // makes request to backend
        myService.getData(id)
            .then(function (data) {
                vm.model = data;
            }).catch(function (error) {
                console.log(error);
            }).finally(function() {
                vm.model = vm.model || {
                    data: []
                };
            });
    }
}

function initSomething() {
    if (vm.myDir) {
        vm.myDir.setSmthOptions(vm.smthOptions);

        vm.whateverOptions.forEach(function (option) {
            vm.myDir.addWhatever(option);
        });
    }
}

问题是，指令可以在获得数据后初始化，因为在id =未定义的情况下，我们创建了默认模型。对不起，我不想使用$timeout，因为我认为它看起来很难看。

现在我使用的是下一个解决方案：

var watcher = $scope.$watch(
    function () {
        return {
            model: $scope.vm.model,
            myDir: $scope.vm.myDir
        };
    },
    function (newObj) {
        if (newObj.model && newObj.myDir) {
            initSomething();
            watcher();
        }
    },
    true
);

但我不确定是否可以使用它。也许有更好的解决办法。

和问题是:我应该如何解决这个问题？如何在加载数据和初始化指令之后调用函数？

Answer 1

$timeout将在下一阶段触发摘要周期，如果您正在寻找与性能相关的功能，则可以使用$scope.$evalAsync()。这是一篇关于这个主题的简洁的文章。

http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

Answer 2

您的服务调用是异步的。因此，当loadData函数完成并进行服务调用时，vm.model尚未初始化。您可以将代码更新为如下内容：

​

function activate() {
    loadData().then(function() {
        initSomething();
    });
}

function loadData() {
    var deferred = $q.defer();
    if (!id) {
        vm.model = vm.model || {
            data: []
        };
        return $q.resolve();
    } // makes request to backend
    else {
        myService.getData(id)
            .then(function(data) {
                vm.model = data;
            }).catch(function(error) {
                console.log(error);
            }).finally(function() {
                vm.model = vm.model || {
                    data: []
                };
                deferred.resolve();
            });
        return deferred.promise;
    }

}

​