2016-05-22 1 views
1

У меня есть представление с директивой ng-include. Значение привязано к модели.AngularJS как вернуть обещание из директивы ng-include

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

Модель может быть изменена вне контроллера с простым javascript.

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

Тогда в моем контроллере я установил модель.

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) { 

    }); 

Теперь я не использую нг-включают в себя, но делать запрос на $ HTTP и $ скомпилировать себя, так что я могу вернуться обещание.

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?

Я придумал этот код, чтобы можно было уведомить хост, но он уродлив. Итак, я думаю, что остаюсь с моим $ 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; 
}; 
+0

Конечно кажется, длинный путь вокруг создания собственного простой директивы без необходимости использовать JQuery – charlietfl

+0

@charlietfl это потому, что он вызван из другого проекта, который не содержит AngularJS. –

+0

Но если вы входите в угловое приложение, можете просто использовать угловое событие для обновления директивы. – charlietfl

ответ

1

вместо использования нг-включают в себя - я предложил бы использовать directive, который имеет свой собственный контроллер и масштаб.
это сфера является отличным местом, чтобы положить обещание (которое является абстракцией построен на вершине переменной)

+0

Это действительно идея. Я попробую это предложение. спасибо –