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>

现在，这非常有效，因为我所做的就是从指令访问控制器的范围。但是，我试图调整我的控制器以将变量绑定到＆＃34;这个＆＃34;范围，所以我可以使用＆＃34;控制器作为＆＃34;但是，当我将控制器功能更改为以下内容时，html上的语法使其更易于阅读：

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

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

Uncaught TypeError: scope.loadMoreTweets is not a function

有人可以解释如何在不返回绑定到$ scope的情况下使该指令工作吗？这是不是/工作＆＃34;控制器As＆＃34;的Plunkr。版： http://plnkr.co/edit/PyIA4HVOMLn0KNJ5V2bc?p=info

Answer 1

我现在修理了它，但发布我的解决方案以防其他人偶然发现这个问题。为了解决这个问题，我使用了“scope.ctrl.loadMoreTweets（）”而不是在我的指令上使用“scope.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指令不会检测使用＆＃34;这个＆＃34;绑定变量的控制器范围。

2 个答案: