Проблемы с контроллерами в Директивах

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

Это на самом деле просто способ проверки перед перемещением функциональности, но когда я раскомментирую эти строки, у меня больше нет доступа к изолированной области, которую я передаю, и все данные, к которым осуществляется доступ, пропадают (это объект массива в нг-повтор).

У меня также есть похожая проблема в директиве, которая находится внутри этой директивы. Эта проблема делает меня еще более запутанным, так как я могу правильно использовать метод, если я определяю его в $ 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 документация объяснит больше. Удачи!