指令中的控制器问题

Question

我正在尝试更新一个小型个人项目中的一些代码，该项目使用angular来符合更好的实践，我听说angular的未来可以通过在指令控制器中添加大量功能来模仿。我不确定我的理解有多正确，但这似乎是一种组织代码的干净方式。

无论如何，说到我的问题，当我给我的指令一个控制器时，我似乎无法让隔离范围发挥作用。我一直在谷歌上搜索我的大脑，试图弄清楚问题是什么，我看到了很多关于它的话题，但没有一个能解决我的问题。

这是一个代码片段：

angular.module('myCongresspersonApp')
  .directive('congressPersonPane', function () {
    var controller = [function() {
    }];
    return {
      templateUrl: 'app/congressPersonPane/congressPersonPane.html',
      restrict: 'EA',
            scope: {
                congressPerson: '=info'
            }//,
      // controller: controller,
      // controllerAs: 'paneCtrl',
      // bindToController: true
    };
  });

这实际上只是在我移动功能之前进行测试的一种方式，但当我取消注释这些行时，我将无法再访问我传入的隔离作用域，并且通过该隔离作用域访问的所有数据都将消失（它是ng repeat中的数组对象）。

我在这个指令中的一个指令中也有类似的问题。这个问题让我更加困惑，因为如果我在$scope下定义一个方法，我可以正确地使用它，但当我使用controllerAs时，我不能使用该方法。所以我很困惑，因为我从这个网站（劳伦在下面提到）中删除了这个实现（以删除范围）

这是它的代码：

'use strict';
angular.module('myCongresspersonApp')
  .directive('voteRecord', function () {
        var controller = ['$scope', 'sunlightAPI', function ($scope, sunlightAPI) {
            var voteCtrl = this;
            voteCtrl.voteInfo = [];
            voteCtrl.test = 'Test';
            voteCtrl.pageNumber = 1;
            voteCtrl.repId = '';
            console.log('inside controller definition');
            voteCtrl.getVotingRecord = function(repId) {
              console.log('inside method');
              voteCtrl.repId = repId;
              var promiseUpdate = sunlightAPI.getVotes(repId, pageNumber);
              promiseUpdate.then(function(votes) {
                console.log('fulfilled promise');
                voteCtrl.voteInfo = votes;
                console.log(voteCtrl.voteInfo);
              }, function(reason) {
                console.log('Failed: ' + reason);
              }, function(update) {
                console.log('Update: ' + update);
              });
      };
      voteCtrl.nextPage = function() {
        voteCtrl.pageNumber++;
        voteCtrl.getVotingRecord(voteCtrl.repId, voteCtrl.pageNumber);
      };
      voteCtrl.previousPage = function() {
        voteCtrl.pageNumber--;
        voteCtrl.getVotingRecord(voteCtrl.repId, voteCtrl.pageNumber);
      };
        }];
    return {
      restrict: 'EA',
      scope: {
        repId: '=representative'
      },
      controller: controller,
      contollerAs: 'voteCtrl',
            bindToController: true,
      templateUrl: 'app/voteRecord/voteRecord.html',
    };
  });

我不确定这个问题是否与这个问题有关，但它们似乎很相似。任何可能有所帮助的帮助或对资源的指导都将不胜感激，因为我不想在我的约定不断变化的情况下编写代码，因为我并不完全理解为什么一件事有效。

谢谢！

Answer 1

我不确定我是否完全理解您的问题，但听起来您在从控制器访问$scope时遇到了问题。您实际上可以将作用域传递给控制器，如下所示：

angular.module('myCongresspersonApp')
  .directive('congressPersonPane', function () {
    var myController = function($scope) {
      // use $scope in here
    };
    return {
      templateUrl: 'app/congressPersonPane/congressPersonPane.html',
      restrict: 'EA',
      scope: {
        congressPerson: '=info'
      },
      controller: ['$scope', myController]
    };
  });

这篇博客文章详细介绍了如何在指令中使用控制器。此外，Angular文档也将进行更多解释。祝你好运