Должен ли я использовать `this` или` $ scope`?

238

Для доступа к функциям контроллера используются два шаблона: this и $scope.

Что я должен использовать и когда? Я понимаю, что this установлен на контроллер, а $scope - объект в цепочке областей видимости. Но с новым синтаксисом "Controller as Var" вы можете легко использовать любой из них. Итак, что я спрашиваю, это то, что лучше и каково направление будущего?

Пример:

  • Использование this

    function UserCtrl() {
      this.bye = function() { alert('....'); };
    }
    
    <body ng-controller='UserCtrl as uCtrl'>
      <button ng-click='uCtrl.bye()'>bye</button>
    
  • Использование $scope

    function UserCtrl($scope) {
        $scope.bye = function () { alert('....'); };
    }
    
    <body ng-controller='UserCtrl'>
        <button ng-click='bye()'>bye</button>
    

Я лично считаю, что this.name будет проще на глазу и более естественным по сравнению с другими шаблонами OO Javascript.

Посоветуйте пожалуйста?

Показать ещё 2 комментария
Теги:

9 ответов

218

Оба имеют свои возможности. Во-первых, некоторая история...

$scope - это "классический" метод, в то время как "controller as" намного более поздний (с версии 1.2.0 официально, хотя он появился в нестабильных предварительных версиях до этого).

Оба работают отлично, и единственный неправильный ответ - смешивать их в одном приложении без явной причины. Честно говоря, смешивание их будет работать, но это просто добавит к путанице. Поэтому выберите один и бросьте с ним. Самое главное - быть последовательным.

Какой? Это зависит от вас. Есть еще много примеров возможностей $scope, но "контроллер как" также собирает пар. Лучше другого? Это спорно. Итак, как вы выбираете?

Комфорт

Я предпочитаю "контроллер как", потому что мне нравится скрывать область $scope и выставлять членов из контроллера в представление через посреднический объект. Установив это. *, Я могу разоблачить только то, что хочу показать с контроллера на представление. Вы можете сделать это с помощью $scope тоже, я просто предпочитаю использовать стандартный JavaScript для этого. Фактически, я кодирую его так:

var vm = this;

vm.title = 'some title';
vm.saveData = function(){ ... } ;

return vm;

Это кажется мне более чистым и позволяет легко увидеть, что находится под открытым небом. Заметьте, что я называю переменную, которую я возвращаю "vm", что означает viewmodel. Это просто моя конвенция.

С $scope я могу делать то же самое, поэтому я не добавляю или не умаляю технику.

$scope.title = 'some title';
$scope.saveData = function() { ... };

Итак, это до вас.

Injection

В области $scope мне нужно ввести $scope в контроллер. Мне не нужно это делать с контроллером, если только мне это не нужно по какой-то другой причине (например, $broadcast или watches, хотя я стараюсь избегать часов в контроллере).

UPDATE Я написал этот пост о двух вариантах: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

  • 4
    Лично я также следую вашему подходу, используя vm. Единственный запах кода, который я обнаружил, - это когда вам нужно специально взаимодействовать с $ scope, например, подпиской или трансляцией событий, доступом к переменным проверки формы в вашем контроллере и т. Д. Это приводит к несколько смешанной среде, где вам все еще нужно внедрить $ scope даже если вы используете контроллер в качестве функции.
  • 9
    Правильно. В этом случае все еще используется $ scope, но он больше используется как сервис. Когда мы внедряем угловые сервисы ($ scope, $ q и т. Д.), Они предоставляют некоторую необходимую нам функцию. $ scope позволяет нам просматривать, применять, использовать сообщения, а также привязку данных. И даже при использовании контроллера как, $ scope все еще используется, его просто абстрагируют
Показать ещё 16 комментариев
66

$scope удаляется в Angular 2.0. Таким образом, использование this было бы подходом, который другие хотят придерживаться по мере приближения даты выпуска Angular 2.0.

39

Мое мнение таково, что 'this' в javascript имеет достаточно проблем на своем собственном, и что добавление другого смысла/использования для него не очень хорошая идея.

Я использую $scope для большей ясности.

UPDATE

Теперь существует синтаксис "контроллер как", обсуждаемый здесь. Я не поклонник, но теперь, когда это более "официальная" конструкция AngularJS, она заслуживает некоторого внимания.

  • 10
    Я думаю, что сначала нам нужно понять новый синтаксис «UserCtrl as uCtrl», прежде чем мы сможем сказать, какой из них мы считаем лучше.
  • 0
    'UserCtrl as uCtrl', я согласен, это нужно понимать. Я думаю, что это плохая идея, по большинству тех же причин, что и приведенные здесь аргументы: groups.google.com/forum/#!topic/angular/84selECbp1I
Показать ещё 4 комментария
10

Я думаю, что контроллер лучше, поскольку он позволяет более легко встраивать области, как описано Тоддом Мотто здесь:

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

Кроме того, он гарантирует, что у вас всегда есть хотя бы один. в вашем обязательном выражении, которое заставляет вас следовать рекомендациям не привязывать к примитивам.

Кроме того, вы можете отделить от области, которая уходит в 2.0.

6

Использование 'this' кажется новым по сравнению с Google I/O 2013

http://m.youtube.com/watch?v=HCR7i5F5L8c

Кроме того, проверьте этот ответ: 'this' vs $scope в контроллерах AngularJS

5

Документация Angular явно указывает вам, что рекомендуется использовать this. Это, в дополнение к тому, что удаление $scope является достаточным основанием для того, чтобы я никогда не использовал $scope.

4

jason328 "$ scope удаляется в Angular 2.0", что является веской причиной для меня. И я нашел еще одну причину, чтобы помочь мне сделать выбор: this более читаемый - когда я вижу fooCtrl.bar в HTML, я сразу знаю, где найти определение bar.

Обновления: вскоре после переключения на this решение, я начал пропустить $scope способ, который требует меньше ввода

1

Я предпочитаю комбинацию.

Простой console.log $scope и 'this' после заполнения их некоторыми макетными данными покажет вам это.

$scope позволяет получить доступ к элементам крышки контроллера, например:

$$ChildScope: null;
$$childHead: null;
$$childTail: null;
$$listenerCount: Object;
$$listeners: Object;
$$nextSibling: Scope;
$$prevSibling: null;
$$watchers: null;
$$watcherCount: 0;
$id: 2;
$parent: Object;
foo: 'bar';

** Свойства и методы с помощью $$ не рекомендуется обходиться командой Angular, но $может быть безопасной игрой для классных вещей с $parent и $id.

'this' переходит прямо к точке, привязывая данные и функции с двухсторонней привязкой. Вы увидите только то, что вы приложили:

foo: 'bar';

Итак, почему я предпочитаю комбинацию?

В вложенных приложениях ui-router я могу получить доступ к основному контроллеру, установить и вызвать универсальные значения и функции внутри дочернего контроллера:

В главном контроллере:

// Main Controller
var mainCtrl = this;
mainCtrl.foo = 'Parent at the bar';

В дочернем контроллере:

// Child Controller
var mainCtrl = $scope.$parent.mainCtrl;
var childCtrl = this;

// update the parent from within the child
childCtrl.underageDrinking = function(){
    mainCtrl.foo = 'Child at the bar';
}

// And then attach the child back to a property on the parent controller!
mainCtrl.currentCtrl = childCtrl;

Теперь вы можете получить доступ к родительскому объекту из дочернего элемента и дочернего элемента из родителя!

1

Оба работают, но если вы применяете то, что подходит для области видимости в $scope, и если вы примените к контроллеру то, что подходит для контроллера, ваш код будет прост в обслуживании. Для людей, которые говорят, что "Ugh просто используют область, забудьте этот контроллер как синтаксис"... Он может работать так же, но мне интересно, как вы сможете поддерживать огромное приложение, не теряя при этом никаких следов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню