Nhiều vấn đề phạm vi ng-init

Question

Tôi đang cố gắng sử dụng ng-include với ng-init để tái sử dụng cùng một thành phần bằng cách chỉ thay đổi dữ liệu của nó.

Mã thành phần ("slider.html", mà không có người điều khiển) trông như thế này:

<div ng-repeat="person in persons"> 
    {{person.name}} 
</div> 

Từ giao diện chính, tôi muốn sử dụng lại cùng một thành phần thay đổi "người" danh sách như vậy trong xem tôi có:

<!--slider #1 --> 
<div ng-init="persons=english" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="persons=german" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

và trong bộ điều khiển tôi khởi tạo 2 danh sách "tiếng anh" và "Đức" như thế này:

$scope.english = records.filter(function(t){return t.nationality=="english";}); 
$scope.german = records.filter(function(t){return t.nationality=="german";}); 

Điều gì xảy ra là 2 thành phần hiển thị cùng một danh sách dữ liệu (tiếng Đức); là có một cách để ràng buộc 2 bộ khác nhau cho các thành phần?

Answer 1

Điều đó (có cả hai danh sách được đặt là tiếng Đức) xảy ra bởi vì, cuối cùng, bạn chỉ sử dụng một bộ điều khiển, trong đó chỉ có một phạm vi trong đó có sẵn biến thể persons. Khi AngularJS bắt đầu quá trình khởi động, nó xử lý ng-init đầu tiên, cập nhật biến người của bộ điều khiển hiện tại thành Tiếng Anh. Sau đó, nó xử lý ng-init thứ hai, cập nhật lại cùng một số persons biến ngay bây giờ thành Đức. Sau đó, khi ng-lặp lại được trả lại, nó sẽ lấy dữ liệu biến hiện tại và độc đáo persons, do đó, là tất cả mọi thứ bằng tiếng Đức.

Điều bạn có thể làm là có bộ điều khiển độc lập cho mỗi thành phần (slider.html), vì vậy mỗi bộ điều khiển sẽ có các biến liên kết riêng để bạn có thể tạo biến người cho mỗi biến và khởi tạo biến của bộ điều khiển độc lập với ng chỉ thị -init. Ví dụ:

<div ng-controller="MySubController" ng-repeat="person in persons"> 
    {{person.name}} 
</div> 

...

<!--slider #1 --> 
<div ng-init="initMySubController(english)" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

<!-- slider #2 --> 
<div ng-init="initMySubController(german)" ng-include ="'inc/app/views/widgets/slider.html'"></div> 

Trong một tập tin JS:

var myApp = angular.module('myApp',[]); 

myApp.controller('MySubController', ['$scope', function($scope) { 
    $scope.persons = []; 

    $scope.initMySubController = function(personsData) { 
     $scope.persons = personsData; 
    } 
}]);