Question

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

我已经尝试过使用bindToController，如下所示，我添加了指令函数中使用的不同对象，但当我尝试使用'link'访问这些对象时，它们都返回为未定义的控制台。

此处示例。在控制器中定义的'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进行绑定。

＆＃13;

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);
      })
    }
  }
})

＆＃13;

<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>

＆＃13;

AngularJS Custom指令 - 在指令链接中发出访问controllerAs变量/对象的问题

1 个答案: