Angularjs ng-controller with resolve

Question

I\'ve ran into problem with ng-controller and \'resolve\' functionality:

I have a controller that requires some dependency to be resolved before running, it works fine w

Answer 1

'data' from route resolve will not be available for injection to a controller activated other than route provider. it will be available only to the view configured in the route provider.

if you want the data to the controller activated directly other than routeprovider activation, you need to put a hack for it.

see if this link helps for it:

http://www.johnpapa.net/route-resolve-and-controller-activate-in-angularjs/

Answer 2

You can use the mechanism of the prototype.

.when('/someUrl', {
    template : '<div ng-controller="MyController" ng-template="some.html"></div>',
    controller: function (data) { 
        var pr = this;
        pr.data = data;
    },
    controllerAs: 'pr',
    resolve : {
        data: ['Service', function (Service) {
            return Service.getData();
        }]
    }
})

angular.module('myApp')
  .controller('MyController', ['$scope', function ($scope) {
      $scope.data = $scope.pr.data; //magic
    }
  ]
);

Now wherever you want to use

'<div ng-controller="MyController"></div>'

you need to ensure that there pr.data in the Scope of the calling controller. As an example uib-modal

var modalInstance = $modal.open({
    animation: true,
    templateUrl: 'modal.html',
    resolve: {
        data: ['Service', function (Service) {
            return Service.getData();
        }]
    },
    controller: function ($scope, $modalInstance, data) { 
        var pr = this;
        pr.data = data;
        pr.ok = function () {
            $modalInstance.close();
        };
    },
    controllerAs:'pr',
    size:'sm'
});

modal.html

<script type="text/ng-template" id="modal.html">
    <div class="modal-body">
        <div ng-include="some.html"  ng-controller="MyController"></div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary pull-right" type="button" ng-click="pr.ok()">{{ 'ok' | capitalize:'first'}}</button>
    </div>
</script>

And now you can use $scope.data = $scope.pr.data; in MyController

pr.data is my style. You can rewrite the code without PR. the basic principle of working with ng-controller described in this video https://egghead.io/lessons/angularjs-the-dot