Using Controllers In Directives In AngularJS

Question

my directive:

angular.module('matrixarMatrice', []).directive('mtxMatriceForm', function () {
  return {
    restrict: 'E',
    templateUrl: 'views/matrice/matrice.html',
    scope: {
      matrix: '=',
      isclicked: '=',
      selectedprice: '&'
    },
    link: function (scope, element, attrs) {
      ...
      scope.selected = function (prices) {
        scope.selected.id = prices.id;
        scope.selectedprice(prices);
      };
    }
  };
});

my controller:

$scope.selectedprice = function (prices) {
  console.log(prices);
};

my html:

<mtx-matrice-form matrix="matrix " isclicked="isclicked" selectedprice="selectedprice(prices)"></mtx-matrice-form>

In my directive when i select item i call my controller. I want to exploit my object prices, but the problem i have at the moment is i have an undefined in my controller. Does anyone know the correct way of doing this?

Shouldn't this selectedprice="selectedprice(prices)" be selectedprice="selectedprice"? Your code binds the result of calling selectedprice(prices) to the directive's scope.selectedprice. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jan 8, 2015 at 14:01

Lalit Sachdeva · Accepted Answer · 2015-01-08 14:12:48Z

1

This is the one option that you can use to include controller inside a directive! There are other options as well. Hope it helps!

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Lorem';
});

app.directive('directives', function() {
  return {
    restrict: 'E',
    controller: function($scope, $element){
      $scope.name = $scope.name + "impsum";
    },
    link: function(scope, el, attr) {
      scope.name = scope.name + "Ipsum";
    }
  }
})

answered Jan 8, 2015 at 14:12

Lalit Sachdeva

6,6512 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mercer · Accepted Answer · 2015-01-08 14:05:16Z

0

i have found this solution:

in my directive:

...
scope.selected = function (prices) {
   scope.selected.id = prices.id;
   scope.selectedprice({prices: prices});
};
...

answered Jan 8, 2015 at 14:05

Mercer

10k32 gold badges115 silver badges174 bronze badges

1 Comment

lvarayut Over a year ago

Basically, when you want to pass a function to the directive, you need to pass the parameter as an object. So in you case, it should look like this:

<mtx-matrice-form matrix="matrix " isclicked="isclicked" selectedprice="selectedprice({prices: foo})"></mtx-matrice-form>

.

Collectives™ on Stack Overflow

Using Controllers In Directives In AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related