Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have this code:

<body ng-controller="testController">
    <div test-directive transform="transform()">
    </div>


    <script type="text/ng-template" id="testDirective.html">
        <div>
            <p>
                {{transform()}}
            </p>
        </div>
    </script>

    <script>
        angular.module("Test", [])
        .directive("testDirective", function() {
            return {
                templateUrl: "testDirective.html",
                scope: {
                    transform: "&"
                },
                link: function(scope) {

                }
            };
        })
        .controller("testController", function($scope) {
            $scope.transform = function() {
                return "<a ng-click='somethingInController()'>Do Something</a>";
            };

            $scope.somethingInController = function() {
                alert("Good!");
            };
        });
    </script>

</body>

So basically what I want to accomplish is to create a directive with a method that will be called from the controller. And that method will do something with the values passed (in this example it does not receives nothing, but in the real code it does).

Up to that point is working. However, the next thing I want to do is create an element that will call a method in the controller. The directive does not knows what kind of element will be (can be anything) nor what method will be. Is there any way to do it?

Fiddle Example:

http://jsfiddle.net/abrahamsustaita/C57Ft/0/ - Version 0

http://jsfiddle.net/abrahamsustaita/C57Ft/1/ - Version 1

FIDDLE EXAMPLE WORKING

http://jsfiddle.net/abrahamsustaita/C57Ft/2/ - Version 2

The version 2 is now working (I'm not sure if this is the way to go, but it works...). However, I cannot execute the method in the parent controller.

share|improve this question

1 Answer 1

Yes. However there is a few problems with your code. I will start by answering your question.

<test-directive transform='mycustommethod'></test-directive>

// transform in the directive scope will point to mycustommethod
angular.module('app').directive('testDirective', function() {
    return {
        restrict: 'E',
        scope: {
            transform: '&'
        }
    }
});

The problem is that printing the html will be escaped and you will get &lt; instead of < (etc.). You can use ng-bind-html instead but the returned html will not be bound. You will need to inject the html manually (you can use jquery for this) in your link method and use var compiled = $compile(html)(scope) to bind the result. Then call ele.after(compiled) or ele.replace(compiled) to add it to your page.

share|improve this answer
    
Thanks for your answer. However, you misunderstood it. The problem is not with the transform method, it is already there. The problem is the directive does not know the method somethingInController (see jsfiddle.net/C57Ft). Also, I know it will be escaped. Actually that is the problem, how to inject the html in the directive and execute a method at the controller –  AbrahamSustaita 1 hour ago
    
Read my full answer. I explain the escaping and why it doesn't know of somethingInController. –  Micah Williamson 1 hour ago
    
Thanks... I read it, but it does not answer the question. I cannot use the link because the info in the directive's html will be modified by the controller, not by the directive, so I have no ele there. Did you see the fiddle? –  AbrahamSustaita 57 mins ago
    
I have editd the fiddle (jsfiddle.net/C57Ft) so you can get a better idea of why what you said will not help me. (Or maybe I'm wrong, and in such case, if you can get me a better idea of how to do it I'll appreciate it) –  AbrahamSustaita 52 mins ago
    
Your answer gave me a clue. Now the html is appended, but I cannot call the parent's controller method. Any idea? –  AbrahamSustaita 11 mins ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.