I'm trying inside a directive to access a method which is defined in the scope of my directive controller

This is a piece of my directive

angular.module('myApp', []).directive('jqmultiselect', function($timeout){
return {
    restrict: 'A',
    scope: { 
        info: '=info',
    },
    link: function (scope, element, attrs, ngModelCtrl) {
        $timeout(function(){
            //simple example
            $(element).click(function(){
                //do something with info
                info = 'test';
                scope.$eval(attrs.customclick);
            });
        });
    }
};
}).controller('MainCtrl', function ($scope, $http, $timeout){
    $scope.myInfo="test";
    $scope.reloadModule = function(info){
        console.log(info);
    };
});

What I am trying to do is to call a function named "reloadModule()" in the controller through attribute tag of a HTML element

piece of my HTML code

<select
    jqmultiselect 
    info="myInfo" 
    customclick="reloadModule(info)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

More specific example is on the Jsfiddle http://jsfiddle.net/7j3HV/2/

Do you know how can I make it display the alert with "change ok" inside ?

share|improve this question
up vote 0 down vote accepted

There are problems in your fiddle sample. One is your missing ng-controller declaration:

<div ng-app="myApp" ng-controller="MainCtrl">

The other is not exactly and issue but a feature of the "isolated scope" directives, which allows you to use & to include methods from a parent controller.

Something like:

angular.module('myApp', []).directive('jqmultiselect', function($timeout){
    return {
        restrict: 'A',
        scope: { 
            info: '=info',
            customclick:"&"
        },
...

This allows you to invoke the method inside your directive as simple as scope.customclick();

Regarding your second question, how to update a var from my directive, here fiddle sample:

scope.$apply(function () {
   scope.info = "change ok";
});

Here is the corrected version:

http://jsfiddle.net/3J5L4/5/

share|improve this answer
    
Please do not forget to mark this as your answer if you find it helpful – Dalorzo May 20 '14 at 17:19
    
Sorry for the error, I think you answered just before we edit the jsfiddle ! Thanks for the & info, however I still can't make it update my 'info' data in the parent scope. See this example updated with & : jsfiddle.net/MmDh3/1 (I'd like to log "change ok") Any idea ? – Quentin May 20 '14 at 18:06
    
Here you go: jsfiddle.net/Eaw2v – tasseKATT May 20 '14 at 18:29
    
Yes but why $scope.myInfo doesn't change ? ({{myInfo}} stays at 'test' instead of 'change ok' ) Can we modify its value in the controller scope from the directive ? See this jsfiddle, maybe it's a better example : jsfiddle.net/3YxbY/1 – Quentin May 20 '14 at 18:37
1  
Updated and added comments: jsfiddle.net/vp7uU – tasseKATT May 20 '14 at 18:46

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.