AngularJS自定义指令-在指令链接中访问controllerAs变量/对象的问题

Question

我刚刚开始重构我的代码以在指令中执行 DOM 操作和函数，而不是像以前那样在控制器内部执行，但是我在访问使用控制器定义的变量/对象时遇到了问题控制器内的“this”语法我需要从那里继承它们。

我尝试使用如下的 bindToController，在其中添加了指令函数中使用的不同对象，但是当我尝试在“链接”中访问这些对象时，它们都以未定义的形式返回控制台。

这里的例子。在控制器中定义的“this.test”，尝试在控制台日志消息中的指令中访问它。

控制器：

app.controller('notificationsController', function($scope, $state, $http, $document, $mdDialog, $filter, $timeout, $mdToast) {

  this.test = 'TEST';

指令：

app.directive('clearNotifications', function($mdDialog, $mdToast, $timeout) {
return {
    controller: 'notificationsController', 
    controllerAs: 'notifications',
    scope: {},
    bindToController: {
        notifications: '=',
        filters: '=',
        test: '@'
    },
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('click', function() {

            console.log('notifications.test string test: ' + notifications.test);

Answer 1

控制器中的this与指令中的controllerAs不同，指令中应使用ctrl或model进行绑定。

var app = angular.module("app", []);

app.controller("notificationsController", function($scope) {
  this.test = "foo!";
})

app.directive("clearNotifications", function() {
  return {
    controller: 'notificationsController',
    controllerAs: 'notifications',
    scope: {},
    bindToController: {
      notifications: '=',
      filters: '=',
      test: '@'
    },
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function() {
        console.log('notifications.test string test: ' + ctrl.test);
      })
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <button clear-notifications>clearNotifications</button>
</div>