biến phạm vi góc và các biến điều khiển bình thường

Tôi có hai bộ mã như saubiến phạm vi góc và các biến điều khiển bình thường

bộ đầu tiên của Bộ luật:

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>

Thứ hai Set của Bộ luật:

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>

Tôi muốn biết sự khác biệt giữa hai cách này để bày tỏ ý mô hình để xem. Có thể một số xin vui lòng giải thích. Tôi mới vào góc JS

Nguồn

2014-10-01 Yokesh T

Bạn có lẽ nên đọc về cách thức hoạt động của Angular với '$ scope'. Đó là cách được khuyến nghị để liên kết với giao diện người dùng. Đối với một, mà không có '$ scope' bạn sẽ không' $ xem' và do đó tôi sẽ không mong đợi 2-cách ràng buộc để làm việc. Ngoài ra, đoạn trích của bạn dường như đã chạy cho tôi. –

Vui lòng xem bài đăng và video này https://thinkster.io/egghead/experimental-controller-as-syntax/ – Chandermani

Mã này đang hoạt động. –

controllerAs Xem Cú pháp: Sử dụng các controllerAs cú pháp trên bộ điều khiển cổ điển với cú pháp phạm vi $.

Tại sao ?: Bộ điều khiển được tạo, "mới" và cung cấp một cá thể mới và cú pháp controllerAs gần với cú pháp của hàm tạo JavaScript so với cú pháp $ scope cổ điển.

Tại sao ?: Nó khuyến khích sử dụng ràng buộc đối tượng "chấm" trong Chế độ xem (ví dụ: customer.name thay vì tên), theo ngữ cảnh, dễ đọc hơn và tránh mọi sự cố tham chiếu có thể xảy ra mà không có "nằm rải rác".

Tại sao ?: Giúp tránh sử dụng $ cuộc gọi mẹ trong lần xem với bộ điều khiển lồng nhau.

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

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

controllerAs khiển Cú pháp: Sử dụng các cú pháp controllerAs trên bộ điều khiển cổ điển với cú pháp $ phạm vi.

Cú pháp controllerAs sử dụng này điều khiển bên trong mà được ràng buộc với $ phạm vi

Tại sao ?: controllerAs là đường cú pháp trên $ phạm vi. Bạn vẫn có thể liên kết với phương thức Xem và vẫn truy cập phạm vi $.

Tại sao ?: Giúp tránh sự cám dỗ của việc sử dụng các phương pháp phạm vi $ trong bộ điều khiển khi có thể tốt hơn để tránh hoặc di chuyển chúng đến nhà máy. Xem xét sử dụng phạm vi $ trong một nhà máy, hoặc nếu trong một bộ điều khiển chỉ khi cần thiết. Ví dụ: khi xuất bản và đăng ký sự kiện bằng cách sử dụng $ emit, $ broadcast hoặc $ trên việc xem xét di chuyển các mục đích sử dụng này đến nhà máy và gọi từ bộ điều khiển.

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

controllerAs với vm: Sử dụng một biến chụp cho điều này khi sử dụng cú pháp controllerAs. Chọn một tên biến nhất quán như vm, viết tắt của ViewModel.

Tại sao ?: Từ khóa này theo ngữ cảnh và khi được sử dụng trong một hàm bên trong bộ điều khiển có thể thay đổi ngữ cảnh của nó. Nắm bắt bối cảnh của điều này tránh gặp phải vấn đề này.

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

Lưu ý: Bạn có thể tránh bất kỳ cảnh báo jshint nào bằng cách đặt nhận xét bên dưới dòng mã. /* jshint validthis: true / var vm = this; Lưu ý: Khi tạo đồng hồ trong bộ điều khiển bằng bộ điều khiển, bạn có thể xem vm. thành viên sử dụng cú pháp sau. (Tạo đồng hồ một cách thận trọng khi họ thêm tải hơn để chu kỳ tiêu hóa.)

$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

Nguồn

2014-10-01 12:12:24 Jack

Bạn thực sự không nên sử dụng this tuyên bố mô hình liên kết với giao diện người dùng với góc. Ví dụ đầu tiên của bạn rất hiếm thấy trong Angular. Theo kinh nghiệm của tôi, ngay cả điều khiển răng cưa cũng không được thấy nhiều.

Sự khác biệt giữa hai ví dụ là một ví dụ sử dụng $scope trong khi khác thì không. Sử dụng $scope là nền tảng cho cách liên kết Góc (và liên kết 2 chiều) với giao diện người dùng. Số điện thoại $scope không phải là chỉ thay thế cho this. $scope được kế thừa từ bộ điều khiển cha $scope đối tượng lên trên cây cho đến khi đạt đến $rootScope.

Vì vậy, có một cây của $scope đối tượng xác định trạng thái của ứng dụng Góc. Mỗi lần Angular được cảnh báo để làm như vậy (thông qua chu kỳ $digest), Angular kiểm tra các giá trị trên tất cả các đối tượng $scope trong cây. Nếu các giá trị đã thay đổi, Angular có thể rebind UI. Đây là cơ bản cách liên kết 2 chiều hoạt động.

Vì vậy, sử dụng ví dụ đầu tiên của bạn sẽ làm việc, nhưng sẽ không cung cấp cho bạn rất nhiều lợi ích của việc sử dụng góc.

Bạn có thể nhìn thấy từ ví dụ dưới đây là khi một sự kiện nhấp chuột là bắn, dữ liệu không cập nhật vì nó nên:

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>

Nguồn

2014-10-01 10:06:49

Ví dụ này không hợp lệ làm đối số. Trước hết, bạn đang sử dụng từ khóa 'this' bên trong' clickMe' funcion, đây là một ngữ cảnh khác. Bạn nên nắm bắt 'this' ngay sau khi bộ điều khiển bắt đầu với một số biến và sử dụng nó. Sau đó nó sẽ hoạt động, xem ** câu trả lời ** của Jack để hiểu. – 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>

Đoạn mã trên sẽ làm việc và cũng có thể nó đang làm một Two Way ràng buộc dữ liệu. Vì vậy, bằng cách khai báo hàm và biến bên trong bộ điều khiển bằng cách sử dụng "this", tôi có thể sử dụng cụ thể các biến và hàm đó chỉ trong các hàm đó chứ không phải bằng cách sử dụng $ scope tree sẽ phát triển. Trong trường hợp này tôi có thể giảm kích thước bộ nhớ của các biến và chức năng. Có thể một số xin vui lòng sửa tôi nếu tôi sai

Nguồn

2014-10-06 05:03:42

biến phạm vi góc và các biến điều khiển bình thường

Trả lời

Các vấn đề liên quan