Set attribute value of angular directive from another controller

Question

Angular directive;

.directive('ngFilemanager', function () {
        return {
                    restrict: 'EA',
                    scope: {
                        thefilter: '=',
                    },
                    link: function (scope, element, attrs) {
                    },
                    templateUrl: '/templates/filemanager.html',
                    controller: FileManagerController
        }

Html:

<div id="testcontainer" ng-controller="OtherController">
    ...
    <div ng-click="vm.myfunction">Set Filter</div> 
    ...
        <div id="thefilemanager" ng-filemanager thefilter=""></div>
    ...
</div>

How can i set thefilter value in a function of OtherController?

I tried setting the attribute value by jquery but my ng-view isn't updated correctly then.

i need to change thefilter from another controller [updated question to make it clear] — daniel
– daniel, Commented Dec 11, 2013 at 16:42
The way you have configured (with =) means you want to map in a controller scoped property. The controller that wraps the div can have property named filter and then, you would pass it in theFilter. thefilter="filter". Then if you change in the directive the changes would be seen. — Davin Tryon
– Davin Tryon, Commented Dec 11, 2013 at 16:44
I have wrapped another controller (not FileManagerController) around the div. Setting thefilter="myfilter" in this does not work — daniel
– daniel, Commented Dec 11, 2013 at 16:47
the wrapping controller does not have the same scope as the directive? — daniel
– daniel, Commented Dec 11, 2013 at 16:48

Jonathan Rowny · Accepted Answer · 2013-12-11 17:26:51Z

5

You've got bi-directional isolated scope so:

function OtherController($scope){
  $scope.myfilter= "";
  $scope.setFilter = function(what){
    $scope.myfilter = what;
  }
}

and HTML:

<div id="testcontainer" ng-controller="OtherController">
   <div ng-click="setFilter('fun')">Set Filter</div> 
   <div id="thefilemanager" ng-filemanager thefilter="myfilter"></div>
</div>

Then when you change $scope.myfilter in the OtherController's scope, scope.thefilter changes in your directive's scope.

If the "other" controller is not a direct parent, you could use $emit or $broadcast depending on where the target is.

Here's an example using $broadcast instead:

app.controller('MainCtrl', function($scope) {
  $scope.setFilter = function(what){
    $scope.$broadcast('setFilter', what);
  }
});

then inside your directive you can listen:

link: function (scope, element, attrs) {
    scope.$on('setFilter', function(e, what){
      scope.thefilter = what;
    });
},

To make it work anywhere, you can $broadcast from $rootScope, but at that point you might want to re-evaluate why you have to do this. Angular itself does this a lot, for example, routeChangeSuccess event, but that doesn't mean you should do it.

edited Dec 11, 2013 at 17:26

answered Dec 11, 2013 at 16:45

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

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

11 Comments

daniel Over a year ago

what do you mean by direct parent?

Jonathan Rowny Over a year ago

I should say, a controller which shares scope with wherever the directive is. Which is usually the parent scope of your directive. In the example, by using ng-controller, we know the OtherController will be the parent scope. If you show me where the "OtherController" you speak of is, I can maybe help more.

Jonathan Rowny Over a year ago

And as other commenters have said, you shouldn't set the attribute via jQuery.

Jonathan Rowny Over a year ago

Well then you'll have to post a plnkr or a jsFiddle because you're doing something else wrong that we cannot see from the code provided.

Jonathan Rowny Over a year ago

Here is a Plnkr that shows it working just fine: plnkr.co/edit/ZfvPcDqOYKmRJ3JNPrjX of course I don't have your other controller or template or anything so I'm not sure what else could be wrong.

|

Oliver · Accepted Answer · 2013-12-11 16:44:48Z

0

This will work if the other controller is a parent of ngFilemanager

<div id="thefilemanager" ng-filemanager thefilter="theFilterValue"></div>

In some other controller

...
$scope.theFilterValue = 'some other value';
...

Look the doc's isolate scope on directives section

answered Dec 11, 2013 at 16:44

Oliver

4,4712 gold badges23 silver badges18 bronze badges

Collectives™ on Stack Overflow

Set attribute value of angular directive from another controller

2 Answers 2

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related