javascript - AngularJS 如何从 ng-include 指令返回 promise

Question

我有一个带有 ng-include 指令的 View 。该值绑定(bind)到模型。

<div ng-app="mainModule">
    <div id="mainController" ng-controller="mainController as main">
        <div ng-include="main.guestUrl"></div>            
    </div>
</div>

可以使用纯 JavaScript 在 Controller 外部更改模型。

var promise = angular.element(controller).controller().navigateTo("controller/view");

然后在我的 Controller 中设置模型。

    vm.goTo = function (url) {
        $scope.$apply(function () {
            vm.guestUrl = $sce.trustAsResourceUrl(url);
        });            
    };

I can use the includeContentRequested event, but how do I return the promise ?

    $scope.$on('includeContentRequested', function (e) {

    });

现在我不使用 ng-include，而是自己执行 $http 请求和 $compile，这样我就可以返回一个 promise 。

vm.navigateTo = function (url) {          

    var deferred = $q.defer();

    var promise = $http({
        method: 'GET',
        url: url
    });

    promise.then(function successCallback(response) {
        var container = $('#mainContainer');
        container.empty();

        var html = response.data;

        container.append(html);

        $compile(container)($scope);

        deferred.resolve('ok');

    }, function errorCallback(reason) {
        deferred.reject(reason);
    });
    return deferred.promise;
};

我认为使用 ng-include 指令更干净。

有人知道如何在 includeContentRequested 事件中返回 promise 吗？

我想出这段代码是为了可以通知主机，但它很丑陋。所以我想我可以继续我的 $http 调用了。

vm.goTo = function () {
    var deferred = $q.defer();

    $scope.$apply(function () {
        vm.guestUrl = $sce.trustAsResourceUrl('http://localhost:63661/');
    });

    $scope.$on('$includeContentLoaded', function (args) {
        deferred.resolve('ok');
        $scope.$destroy('$includeContentLoaded');
    });

    return deferred.promise;
};

Answer 1

不要使用 ng-include - 我建议使用 directive它有自己的 Controller 和范围。
这个范围是放置 promise 的好地方(这是建立在变量之上的抽象)