CODEWITHSUNDEEP
angularjs
Lasslaver
Lasslaver

Reputation: 17

How can i pass extra parameters to a directive without altering its scope

I have been fightin with angular so much that i am needing some help. What i want to do is simply include a template which differs only on the title, two times in the same html (seems easy but angular is making this so tough..) and i need those templates to use the same scope. This should be something similar

app.directive('datePickerModal', function(){
    return {
      restrict: 'E',
      controller: 'activityManagementCtrl',
      templateUrl: '/templates/date_modal.html',
      scope: {
       dateTitle: '=title',
       modal_id: '=id'
      }
    }
  });

and in my html it is 

<date-picker-modal title="Start Date" id="start"></date-picker-modal>
<date-picker-modal title="Deadline" id="deadline"></date-picker-modal>

I also have a controller which has 

$scope.activties = [**SOME ACTIVITES**];

and its activated in the top of my html file. The thing is that when i access my scope, it has none of the activities, nor anything. So angular is creating a copy of my controller and not using mine. Also, if i remove that "scope: {}", it uses the correct scope, but now i cant pass the information i need to activate the modal and stuff. Any solutions? it seems im in loop, either I loose extra information or the list of activities. Thanks!

Upvotes: 0

Views: 50

Answers (2)

elisoff
elisoff

Reputation: 58

https://plnkr.co/edit/ozAstdiMTfuXD8NKXsUI?p=info

So, $scope.activties = [**SOME ACTIVITES**]; is not on 'activityManagementCtrl'? Because it is working fine. You should not have to use things from the parent controller. Try to make it work with the directive controller, so it can be used with other controllers later and it will be easier to someone else understand. :)

Upvotes: 0

Minato
Minato

Reputation: 4533

depending on your angular version if you are on 1.3 or above

return {
      restrict: 'E',
      controller: 'activityManagementCtrl',
      templateUrl: '/templates/date_modal.html',
      transclue: true, // <----------------
      scope: {
       dateTitle: '=title',
       modal_id: '=id'
      }
    }

you can now access parentScope using scope.$parent.

Upvotes: 1

Related Questions