CODEWITHSUNDEEP
angularjs
Whistler
Whistler

Reputation: 1977

How to pass parameter to directive controller?

Hi I'm trying to pass parameter from the page to directive controller. I can pass it to directive, but how can I use it inside the scope of directive controller. My directive:

var modalViewUrl = function ($modal) {
return {
    restrict: 'A', // A: attribute
    scope: { // isolate scope
        'modalViewUrl': '@', // modal view url to render the modal content
        'modalController': '@', // modal view controller (optional)
        'modalSize': '@', // modal view size (optional) sm, md, lg
        'widgetId': '@'
    },
    link: function($scope, element, attrs){

        element.bind('click', function(){

            var template = '<div ng-include="\'' + 'Dashboards/' + $scope.modalViewUrl + '\'"></div>';

            var modalInstance = $modal.open({
                animation: true,
                template: template,
                size : $scope.modalSize,
                controller: $scope.modalController,                    
            });
        });
    }
};
}

and this html:

<a href class="config" modal-view-url="WidgetSettingsModal" modal-controller="widgetSettingsController" widget-id="{{widget.id}}" modal-size="md">

where widget.id is the parameter i would like to pass to "widgetSettingsController".

widgetSettingsController:

var widgetSettingsController = function ($scope, $rootScope, $modalInstance, DataService) {

// Here want to use parameter widgetId   

};

widgetSettingsController.$inject = ['$scope', '$rootScope', '$modalInstance', 'DataService'];

Upvotes: 1

Views: 796

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

Like in example of bootstrap (https://angular-ui.github.io/bootstrap/):

    var modalInstance = $modal.open({
        animation: true,
        template: template,
        size : $scope.modalSize,
        controller: $scope.modalController,
        resolve : {
          myid : function() {
              return $scope.widgetId;
          }
        }                    
    });

Controller can use it now:

var widgetSettingsController = function ($scope, $rootScope, $modalInstance, DataService, myid) {


widgetSettingsController.$inject = ['$scope', '$rootScope', '$modalInstance', 'DataService', 'myid'];

Upvotes: 1

Related Questions