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

Для доступа к функциям контроллера используются два шаблона: 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.

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

ОТВЕТЫ

Ответ 1

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

$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/

Ответ 2

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

Ответ 3

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

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

UPDATE

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

Ответ 4

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

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

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

Простой 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;

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