How can i pass object within template in directive?

Question

place is a object. create-itinerary is directive . I open $ubiModal within a template pass create-itinerary directive and try to pass an object place.But in directive i got [object object].please help me.

$scope.showCreateItinerary = function(place) {
      var tpl = '<div create-itinerary trip-details="\'' + place + '\'"></div>';
      $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        template: tpl,
        controller: 'ModalCtrl',
        size: 'lg',
        backdrop: 'static',
        windowClass: "signup-popup abc"
      });
};

maybe this helps: http://stackoverflow.com/questions/18924577/scope-issues-with-angular-ui-modal — mvermand, Mar 02 '17 at 12:40

lin · Answer 1 · 2017-03-03T08:59:39.180

1

Try to use resolve param:

$scope.showCreateItinerary = function(place) {
    $uibModal.open({
        animation: true,
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        template: '<div create-itinerary trip-details="place"></div>',
        controller: 'ModalCtrl',
        size: 'lg',
        backdrop: 'static',
        windowClass: "signup-popup abc",
        resolve: {
            data: function () {
                return {
                    place: place
                }
            }
        }
    });
};

app.controller('ModalCtrl', function($scope, $modalInstance, data) {
   $scope.place = data.place;
});

edited Mar 03 '17 at 08:59

answered Mar 02 '17 at 12:57

lin

17,956
4
59
83

i need place data in create-itinerary directive – Ayan Sundar Jana Mar 02 '17 at 14:45
@AyanSundarJana Nice, so do it. – lin Mar 02 '17 at 14:50
Actually that is the problem. I can pass variable in the resolve to the modal controller. But as you can see my modal template is dynamic and it's a directive with isolated scope. So even if I pass the object to the modal controller the directive will not be able to access it. I need to pass the object to the directive somehow. – Ayan Sundar Jana Mar 03 '17 at 08:43
@AyanSundarJana I updated my answer. Have you tried to bind your place to an scope? Take a look at the ModelCtrl code. I also refactored your template and removed that old-school string binding and replaced it with your scope var. This should work for you. – lin Mar 03 '17 at 09:01
@AyanSundarJana any feedback or suggestions? – lin Mar 04 '17 at 09:14

How can i pass object within template in directive?

1 Answers1