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

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

javascript angularjs

Javascript AngularJS指令不会检测使用“this”绑定变量的控制器作用域,javascript,angularjs,controller,scope,directive,Javascript,Angularjs,Controller,Scope,Directive,我有以下angularJS控制器和指令： angular.module('twitterApp', []) .controller('AppCtrl', AppCtrl) .directive('enter', EnterFunc); function AppCtrl($scope) { $scope.loadMoreTweets = function() { alert('loading more tweets!'); } } functio

我有以下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>

我的示例停止工作，单击该指令后，我得到以下错误：

Uncaught TypeError: scope.loadMoreTweets is not a function

有人能解释一下如何让这个指令在不返回绑定到$scope的情况下工作吗？以下是不工作/工作控制器的Plunkr版本：

我暂时修复了它，但发布了我的解决方案，以防其他人偶然发现。为了解决这个问题，我没有在指令中使用scope.loadMoreTweets，而是使用scope.ctrl.loadMoreTweets。即使很难做到这一点，我也不太高兴在没有.ctrl的情况下无法访问父作用域，因为.$parent也不起作用。如果有人有更好的解决方案，请让我知道。应该有更多关于将指令与控制器的控制器一起用作语法的文档。

我已经修改了您的代码，以便将要传递给指令的控制器作用域的引用传递给该指令。然后您可以调用引用上的方法。看看这对你有用吗

指令：

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:

这与我的解决方案相同，但控制器别名已移动到html。此外，作用域：{controller:'='}没有任何帮助。是的，作用域：{=}允许您将对对象的引用从父对象传递到指令。另一种方法是请理解controllerAs语法不是一个不同的范围。它所做的只是使控制器在特定变量名下的作用域上可用。要做您想要做的事情，一种更具角度的方法是将控制器中的逻辑移动到服务中，并将该服务注入到指令中。

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

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