Tham số truyền tới Angular ng-include

Question

Tôi đang cố gắng hiển thị một cây nhị phân của các phần tử, mà tôi đi qua đệ quy với ng-include.

Sự khác nhau giữa ng-init="item = item.left" và ng-repeat="item in item.left" là gì? Trong ví dụ này, nó hoạt động giống hệt nhau, nhưng tôi sử dụng mã tương tự trong một dự án và ở đó nó hoạt động khác nhau. Tôi cho rằng đó là vì phạm vi Góc. Có lẽ tôi không nên sử dụng ng-if, vui lòng giải thích cho tôi cách làm tốt hơn.

Các pane.html là:

<div ng-if="!isArray(item.left)"> 
    <div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'"> 
    </div> 
</div> 
<div ng-if="isArray(item.left)"> 
    {{item.left[0]}} 
</div> 
<div ng-if="!isArray(item.right)"> 
    <div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'"> 
    </div> 
</div> 
<div ng-if="isArray(item.right)"> 
    {{item.right[0]}} 
</div> 

<div ng-if="!isArray(item.left)"> 
    <div ng-init = "item = item.left" ng-include="'Views/pane.html'"> 
    </div> 
</div> 
<div ng-if="isArray(item.left)"> 
    {{item.left[0]}} 
</div> 
<div ng-if="!isArray(item.right)"> 
    <div ng-init="item = item.right" ng-include="'Views/pane.html'"> 
    </div> 
</div> 
<div ng-if="isArray(item.right)"> 
    {{item.right[0]}} 
</div> 

Bộ điều khiển là:

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

app.controller('MainCtrl', function ($scope) { 

    $scope.tree = { 
     left: { 
      left: ["leftleft"], 
      right: { 
       left: ["leftrightleft"], 
       right: ["leftrightright"] 
      } 
     }, 
     right: { 
      left: ["rightleft"], 
      right: ["rightright"] 
     } 
    }; 

    $scope.isArray = function (item) { 
     return Array.isArray(item); 
    } 
}); 

EDIT: Trước tiên tôi chạy vào vấn đề mà chỉ thị ng-repeat có một ưu tiên lớn hơn ng- nếu. Tôi đã cố gắng kết hợp chúng, thất bại. IMO thật kỳ lạ khi ng-lặp lại thống trị ng-if.

Answer 1

đèo tham số để kiễu góc ng-bao gồm

Bạn không cần điều đó. tất cả các nguồn của ng-include đều có cùng một bộ điều khiển. Vì vậy, mỗi chế độ xem sẽ thấy cùng một dữ liệu.

sự khác biệt giữa ng-init = là gì "item = item.left" và ng-repeat = "mục trong item.left"

[1]

ng-init="item = item.left" nghĩa là - tạo cá thể mới có tên là bằng với số item.left. Nói cách khác mà bạn đạt được như vậy bằng cách viết trong bộ điều khiển:

$scope.item = $scope.item.left 

---

[2]

ng-repeat="item in item.left" phương tiện tạo ra danh sách các phạm vi dựa trên item.left mảng. Bạn nên biết rằng mỗi mục trong ng-repeat có phạm vi riêng của nó

---

Tôi cố gắng để hiển thị một cây nhị phân của các yếu tố, mà tôi đi qua một cách đệ quy với ng-bao gồm.

Tôi đã đăng trong câu trả lời trước đây cách hiển thị cây bằng cách sử dụng ng-include.

Nó có thể hữu ích: how-do-display-a-collapsible-tree

Phần chính ở đây mà bạn tạo Node với id bọc bởi <scipt> thẻ và sử dụng ng-repeat:

<script type="text/ng-template" id="tree_item_renderer"> 
     <ul class="some" ng-show="data.show"> 
      <li ng-repeat="data in data.nodes" class="parent_li" ng-include="'tree_item_renderer'" tree-node></li> 
     </ul> 
    </script> 


<ul> 
    <li ng-repeat="data in displayTree" ng-include="'tree_item_renderer'"></li> 

Answer 2

Đó là một chút hacky , nhưng tôi đang truyền các biến cho một ng-include với một ng-lặp lại của một mảng chứa một đối tượng JSON:

<div ng-repeat="pass in [{'text':'hello'}]" ng-include="'includepage.html'"></div> 

Trong của bạn bao gồm trang web mà bạn có thể truy cập vào biến của bạn như thế này:

<p>{{pass.text}}</p> 

Answer 3

Làm một chỉ thị chung chung thay vì ng-bao gồm là một giải pháp làm sạch: Angular passing scope to ng-include

http://tech.fongmun.com/post/131863914487/scoping-variables-in-ng-include-without-ng-repeat

Answer 4

Tôi đang sử dụng ng-include với ng-lặp lại của một mảng chứa chuỗi. Nếu bạn muốn gửi nhiều dữ liệu, vui lòng xem câu trả lời Junus Ergin.

Xem mã của tôi Snippet:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app=""> 
 
<div ng-repeat="name in ['Sanjib Pradhan']" ng-include="'your_template.html'"></div> 
 
<div ng-repeat="name in ['Chinmay Sahu']" ng-include="'your_template.html'"></div> 
 

 

 
    <script type="text/ng-template" id="your_template.html"> 
 
      {{name}} 
 
    </script> 
 
    </div>