Set attribute value of angular directive from another controller

问题

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.

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/20524773/set-attribute-value-of-angular-directive-from-another-controller

标签

angularjs

angularjs-directive