Угловые переменные сферы применения и нормальные переменные контроллера

У меня есть два набора кода как следующийУгловые переменные сферы применения и нормальные переменные контроллера

Первый набор Код:

var app=angular.module('demo', []); 
 
app.controller('mainController',function(){ 
 
    this.myVar='hai'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<html ng-app="demo"> 
 
<div ng-controller="mainController as mainControl"> 
 
    <p>{{mainControl.myVar}}</p> 
 
</div> 
 
</html>

Второй набор Код:

var app = angular.module('demo', []); 
 
app.controller('mainController', ['$scope', 
 
    function($scope) { 
 
    $scope.myVar = 'hai'; 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="demo"> 
 
<div ng-controller="mainController"> 
 
    <p>{{myVar}}</p> 
 
</div> 
 

 
</html>

Я хочу знать разницу между этим двумя способом декларирования моделей представления. Может кто-нибудь объяснить. Я новичок в Angular JS

источник

2014-10-01 Yokesh T

Возможно, вам стоит прочитать, как Angular работает с '$ scope'. Это рекомендуемый способ привязки к пользовательскому интерфейсу. Во-первых, без '$ scope' вы не будете' $ смотреть ', и поэтому я не ожидал, что работа с двумя способами. Кроме того, ваши отрывки, похоже, работают для меня. –

Пожалуйста, посмотрите это сообщение и видео https://thinkster.io/egghead/experimental-controller-as-syntax/ – Chandermani

Код работает. –

controllerAs View Синтаксис: Используйте controllerAs синтаксис над классическим контроллером с синтаксисом $ scope.

Почему: Контроллеры построены, «новы» и обеспечивают один новый экземпляр, а синтаксис controllerAs ближе к синтаксису конструктора JavaScript, чем классический синтаксис $ scope.

Почему ?: Он способствует использованию привязки к «пунктируемому» объекту в представлении (например, customer.name вместо имени), который является более контекстуальным, более легким для чтения и позволяет избежать любых проблем со ссылками, которые могут возникнуть без «расставить».

Почему ?: Помогает избежать использования $ parent calls в представлениях с вложенными контроллерами.

<!-- avoid --> 
<div ng-controller="Customer"> 
    {{ name }} 
</div> 

<!-- recommended --> 
<div ng-controller="Customer as customer"> 
    {{ customer.name }} 
</div>

controllerAs Controller Синтаксис: Используйте синтаксис controllerAs над классическим контроллером с синтаксисом $ Scope.

Синтаксис controllerAs использует эти внутренние контроллеры, которые получают связанные с $ рамки

Почему ?: controllerAs является синтаксический более $ области. Вы все равно можете привязываться к методам просмотра и доступа к методам просмотра.

Почему ?: Помогает избежать соблазна использовать методы $ scope внутри контроллера, когда в противном случае лучше избежать их или переместить на завод. Рассмотрите возможность использования $ scope на заводе, или если в контроллере, когда это необходимо. Например, при публикации и подписке на события с использованием $ emit, $ broadcast или $ on следует переместить их на завод и вызвать из контроллера.

/* avoid */ 
function Customer ($scope) { 
    $scope.name = {}; 
    $scope.sendMessage = function() { }; 
} 
/* recommended - but see next section */ 
function Customer() { 
    this.name = {}; 
    this.sendMessage = function() { }; 
}

controllerAs с Виджей Малья: при использовании синтаксиса controllerAs Используйте переменную захвата для этого. Выберите имя постоянной переменной, например vm, что означает ViewModel.

Почему ?: Это ключевое слово контекстуально и при использовании внутри функции внутри контроллера может изменить свой контекст. Захват контекста этого позволяет избежать этой проблемы.

/* avoid */ 
function Customer() { 
    this.name = {}; 
    this.sendMessage = function() { }; 
} 
/* recommended */ 
function Customer() { 
    var vm = this; 
    vm.name = {}; 
    vm.sendMessage = function() { }; 
}

Примечание: вы можете избежать любых предупреждений jshint, разместив комментарий ниже строки кода. /* jshint validthis: true / var vm = this; Примечание: при создании часов в контроллере с использованием контроллера, вы можете смотреть vm., используя следующий синтаксис. (Создать часы с осторожностью, так как они добавляют больше нагрузки на цикл дайджеста.)

$scope.$watch('vm.title', function(current, original) { 
    $log.info('vm.title was %s', original); 
    $log.info('vm.title is now %s', current); 
});

https://github.com/johnpapa/angularjs-styleguide#controllers

источник

2014-10-01 12:12:24 Jack

Вы действительно не должны использовать this, чтобы объявить модель, которая привязывается к пользовательскому интерфейсу с угловым. Ваш первый пример очень редко встречается в Angular. По моему опыту, даже сглаживание контроллера не так много видно.

Разница между двумя примерами заключается в том, что используется $scope, а другой нет. Использование $scope имеет фундаментальное значение для того, как угловые привязки (и двухсторонние привязки) к пользовательскому интерфейсу. $scope не является только заменой для this. $scope наследуется от родительского контроллера $scope объектов вверх по дереву до достижения $rootScope.

Итак, есть дерево $scope объектов, которые определяют состояние углового приложения. Каждый раз, когда Angular предупреждается об этом (через цикл $digest), Angular проверяет значения на всех объектах $scope в дереве. Если значения изменены, Angular может переустановить пользовательский интерфейс. Это по существу то, как работает двусторонняя привязка.

Итак, использование вашего первого примера будет работать, но не даст вам много преимуществ использования углового.

Вы можете видеть из примера ниже, что, когда событие щелчка обжигают, данные не обновляются, как должно:

var app=angular.module('demo', []); 
 
app.controller('mainController',function($scope){ 
 
    this.myVar='hai'; 
 
    
 
    
 
    $scope.clickMe = function() { 
 
     this.myVar = "changed"; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<html ng-app="demo"> 
 
<div ng-controller="mainController as mainControl"> 
 
    <p>{{mainControl.myVar}}</p> 
 
    <button ng-click="clickMe()">click me</button> 
 
</div> 
 
</html>

источник

2014-10-01 10:06:49

Этот пример недействителен в качестве аргумента. Прежде всего, вы используете ключевое слово this this внутри функции clickMe, что является другим контекстом. Вы должны записать 'this', как только контроллер начнет использовать переменную и будет использовать ее. Тогда это сработает, см. ** Ответ Джека, чтобы понять. – Alisson

var app=angular.module('demo', []); 
 
app.controller('mainController',function($scope){ 
 
    this.myVar='hai'; 
 
    
 
    
 
    this.clickMe = function() { 
 
     this.myVar = "changed"; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<html ng-app="demo"> 
 
<div ng-controller="mainController as mainControl"> 
 
    <p>{{mainControl.myVar}}</p> 
 
    <button ng-click="mainControl.clickMe()">click me</button> 
 
</div> 
 
</html>

Приведенный выше код будет работать, а также он делает Two Way привязка данных. Поэтому, объявляя функции и переменные внутри контроллера с помощью «этого», я могу специально использовать эти переменные и функции только внутри этих функций, а не используя $ scope, на которое будет расти дерево. В этом случае я могу уменьшить размер памяти переменных и функций. Может кто-то, пожалуйста, поправьте меня, если я ошибаюсь

источник

2014-10-06 05:03:42

Угловые переменные сферы применения и нормальные переменные контроллера

ответ

Смежные вопросы