2

i have a directive which renders a long list. The Rendering works pretty fine and fast, now i would like to call a function on the Controller with Parameters. How can i achieve this?

Here is my directive:

.directive("slheats", function () {
return {
    restrict: "A",
    scope: {
        slheats: "=",
    },
    link: function (scope, element, attrs) {
        scope.$watch("slheats", function (data) {
            angular.forEach(data, function (heat, h) {
                var body = "";
                var first = true;
                var ct = 1;
                body += "<div class='row heat'>" + heat.Heat + "</div>";
                angular.forEach(heat.Entries, function (entry, e) {
                    var line = "";
                    ct++;

                    line += "<div class='name'><button ng-click='showdetails()'>" + entry.Name + "</button></div>";

                    body += line;
                });
                $(element).append(body);
            });
        });
    }
}

})

.controller('startlistcontroller',['$scope', 'apiservice', 'objectservice', function ($scope, apiservice, objectservice) {
$scope.startlists = [];
$scope.selected = null;


$scope.showdetails = function (x) {
    alert(x);
};

How can i call the showdetails function on my Controller?

Thanks Manuel!

Improve this question

1 Answer 1

Reset to default
3

Assuming the controller you're referring to has the parent scope of the directive, You need to bind the function using angular's Scope Function Expression Binding. See #8 here. So it could look something like: 

.directive("slheats", function () {
  return {
    ...
    scope: {
      slheats: "=",
      internalShowdetails: "&"
    },
    link: function (scope, element, attrs) {
      ....
      line += "<div class='name'><button ng-click='internalShowdetails()'>" + entry.Name + "</button></div>";
      ....
  }
});

Then in your html:

<div slheats="something" internal-show-details="showdetails(a, b, c)"></div>

Additional Reference: http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

Update:

So the above will work as expected provided you are using the template(Url) property on the directive but if you are rendering the html within your link function as OP is doing it needs to be compiled with $compile first. Here's a plnkr showing how that works.

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

8 Comments

i have one module with multiple Controllers and directives, so i guess the parent scope should be the same or? Sorry for that i am quite new to angular. Unfortunatly it is not working with your solution. I will update my question and add the Controller.
What i meant by the controller being/having the parent scope was that wherever the directive is being used in the html it is within some element with ng-controller pointing to that controller. I created this plnkr with your code and I'm just realizing that I'm unsure what you wanted to do with the directive. From the looks of things it seems like you wanted to replace the directive with (or insert) the html in the seen in the 'angular.forEach' block somehow. Could you update the question with a example of how it's used in the html?
the directive right now only renders a Long list of elements, the reason why i used a directive for that, was that ng-repeat was very slow, about 10 times slower also when i turned off the bindings. What i wanna do now is to open a modal Dialog when you click on one of the list items to Display some Details. When i call the internalshowdetails method in the foreach Loop for example it works, but when i insert it in the DOM it is not working.
:) i was actually just about to update the plnkr and my answer to add that... ill still do it anyway for future onlookers.
Now i ran into another Problem, how can i pass the entry variable to the function?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.