AngularJS 指令不会检测使用 "this" 绑定变量的控制器作用域

Question

我有以下 angularJS 控制器和指令：

angular.module('twitterApp', [])
    .controller('AppCtrl', AppCtrl)
    .directive('enter', EnterFunc);

function AppCtrl($scope) {
    $scope.loadMoreTweets = function() {
        alert('loading more tweets!');
    }
}

function EnterFunc() {
    return function(scope, element, attrs) {
        element.bind('click', function() {
            scope.loadMoreTweets();
        });
    }
}

以及以下HTML

  <body ng-app="twitterApp">
    <div class="container" ng-controller="AppCtrl">
      <div enter>
        Roll over to load more tweets
      </div>
    </div>
  </body>

现在，这完美地工作了，因为我所做的只是从指令访问控制器的范围。但是，我正在尝试调整我的控制器以将变量绑定到 "this" 范围，这样我就可以在 html 上使用 "controller as" 语法以使其更易于阅读，但是，当我将我的控制器功能更改为以下内容：

function AppCtrl() {
    var vm = this;
    vm.loadMoreTweets = function() {
        alert('loading more tweets!');
    }
}

我的示例停止工作，单击指令后出现以下错误：

Uncaught TypeError: scope.loadMoreTweets is not a function

有人可以解释如何让这个指令工作而不返回绑定到 $scope 吗？这是 not/working "Controller As" 版本的 Plunkr： http://plnkr.co/edit/PyIA4HVOMLn0KNJ5V2bc?p=info

Answer 1

我暂时修复了它，但发布我的解决方案以防其他人偶然发现这个问题。为了解决这个问题，我没有在指令中使用 "scope.loadMoreTweets()"，而是使用了 "scope.ctrl.loadMoreTweets()"。即使这很有效，我也不太高兴没有“.ctrl”就无法访问父范围，因为“.$parent”也不起作用。如果有人有更好的解决方案，请告诉我。应该有更多关于将指令与 Controller 的 Controller As 语法一起使用的文档。

Answer 2

我已经修改了您的代码以传递对您要传递给指令的控制器范围的引用。然后你可以调用引用的方法。看看这是否适合你

指令：

function EnterFunc() {
  return {
        restrict: 'A',
        scope: {
            controller: '='
        },
        link: link
    }
   function link(scope, element, attrs) {
      element.bind('click', function() {
        //scope.$apply(attrs.action);
        scope.controller.loadMoreTweets();
      });
   }
}

HTML:

<body ng-app="twitterApp">
<div class="container" ng-controller="AppCtrl as ctrl">
  <div enter controller="ctrl">
    Roll over to load more tweets
  </div>
</div>

AngularJS 指令不会检测使用 "this" 绑定变量的控制器作用域

AngularJS directive won't detect controller scope that binds variables using "this"

javascript

scope

controller

directive

angularjs