javascript - Accessing parent scope in directive when using controllerAs - Stack Overflow

admin管理员组

文章数量:1245094

I currently have a directive that's using properties from the parent controller's scope:

.controller('MainCtrl', function($scope) {
  $scope.name = 'My Name';
})

.directive('myDirective', function() {
  return {
    scope: true,
    controller: function($scope) {
      console.log($scope.name); // logs 'My Name'
    }
  };
})

Now I'm moving over to controllerAs syntax in my controllers, but I don't know how to get a reference to the controller object in my directive's controller.

.controller('MainCtrl', function() {
  var vm = this;
  vm.name = 'My Name';
})

.directive('myDirective', function() {
  return {
    scope: true,
    controller: function($scope) {
      console.log(vm.name); // logs 'Undefined'
    }
  };
})

Here's a plunkr illustrating the issue.

I also found this article that's trying to explain something similar, but in this case he's just reusing the exact same controller.

I currently have a directive that's using properties from the parent controller's scope:

.controller('MainCtrl', function($scope) {
  $scope.name = 'My Name';
})

.directive('myDirective', function() {
  return {
    scope: true,
    controller: function($scope) {
      console.log($scope.name); // logs 'My Name'
    }
  };
})

Now I'm moving over to controllerAs syntax in my controllers, but I don't know how to get a reference to the controller object in my directive's controller.

.controller('MainCtrl', function() {
  var vm = this;
  vm.name = 'My Name';
})

.directive('myDirective', function() {
  return {
    scope: true,
    controller: function($scope) {
      console.log(vm.name); // logs 'Undefined'
    }
  };
})

Here's a plunkr illustrating the issue.

I also found this article that's trying to explain something similar, but in this case he's just reusing the exact same controller.

• javascript
• angularjs
• angularjs-directive
• angularjs-scope

Share Improve this question Follow asked Sep 14, 2015 at 19:08 diplosaurusdiplosaurus 2,58855 gold badges2929 silver badges5656 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

When you are using the ControllerAs syntax, a property is created on the $scope object that is an alias to your controller. for example, ng-controller="MainCtrl as vm" gives you $scope.vm. $scope is implied in the HTML, so accessing vm.name in the HTML is the same as accessing $scope.vm.name in JavaScript.

In the controller, you could access either this.name or $scope.vm.name, they would be functionally equivalent. However, in other controllers, this would refer to that specific controller, and thus this.name would not work.

Therefore, in this case, you could access the property you want in the directive's controller by using $scope.vm.name. http://plnkr.co/edit/WTJy7LlB7VRJzwTGdFYs?p=preview

However, you will probably want to also use ControllerAs syntax with the directive as well; in this case, I remend that instead of using vm for your controller names, you use a unique name that can help identify which controller you are referring to. MainCtrl as main, and then referring to main.name will be much clearer.

I do remend using an isolate scope if possible, however, since it will allow you to pletely eliminate the need to inject $scope into your directives, and allow your directive to be self contained, and reusable.

Side note, bindToController: true, does nothing if you are not using an isolate scope; when you are using an isolate scope, it creates properties on the isolated controller to match the scope passed in, allowing for you to access the passed in values without needing $scope.

One option is to traverse the $scope chain until you find vm.

app.directive('myDir', function() {
  return {
    restrict: 'E',
    scope: true,
    template: '<div>my directive</div>',
    bindToController: true,
    controller: function($scope) {
      console.log($scope.name2); // logs 'bound to the controller scope'
      console.log($scope.$parent.vm.name); // logs 'bound to the controller vm'
    }
  };  
});

However, this can be really brittle and it smells a bit off.

A more sophisticated and thought-out approach is to bind a property of your controller's scope to your directive via a passed argument.

HTML:

<my-dir name="vm.name" />

JS:

app.directive('myDir', function() {
  return {
    restrict: 'E',
    scope: {
      name: "="
    },
    template: '<div>my directive</div>',
    bindToController: true,
    controller: function($scope) {
      console.log($scope.name); // logs 'bound to the controller vm' 
    }
  };  
});

See plunkr

本文标签： javascriptAccessing parent scope in directive when using controllerAsStack Overflow