templat parsial Angularjs dengan cakupan tertentu

Saya ingin memasukkan sebagian templat ke dalam templat utama saya, tetapi memiliki cakupan khusus ketika saya memanggil sebagian templat.

Misalnya, ini adalah template utama saya (sangat sederhana, template sebenarnya lebih rumit, jadi ng-iterate tidak dapat digunakan di sini):

<h1>title, my item1 name is {{item1.name}}</h1>
....
<div ng-view="myPartial.html" scope="item1"></div>
....
<div ng-view="myPartial.html" scope="item2"></div>
...

Dan myPartial.html kira-kira seperti itu

<input ng-model="name" />...

data :

{item1: {name:"test1"}, item2: {name: "test2"}}

Hasil yang diharapkan :

<1>title, my item1 name is test1</h1>
....
<div><input value="test1" /></div>
....
<div><input value="test2"></div>
...

Bagaimana Anda melakukan hal semacam ini menggunakan Angularjs?

Haruskah saya membuat arahan khusus dengan myPartial.html sebagai templat? Terima kasih


javascript angularjs templates
person Quentin    schedule 02.01.2014    source sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Karena ng-view hanya dapat ditemukan sekali di halaman, saya menggunakan ng-include dan ng-init untuk menginisialisasi cakupan pengontrol tertentu:

<div ng-include="'/myPartial.html'" ng-init="init(items.item1)" ng-controller="YourController"></div>

pengontrol :

this.app.controller("YourController", function YourController($scope) {
    $scope.init = function(item){
        $scope.item = item;
    }
});
person Quentin    schedule 09.01.2014

arrow_upward
1
arrow_downward

<div ng-view="myPartial.html" ng-controller="yourController"></div>

lalu buat YourController sebagai pengontrol sudut (atau gunakan yang sudah ada) dan tetapkan data ke $scope.item1

person Sean Doe    schedule 02.01.2014
comment
Oke, saya akan mencobanya, namun apakah pengikatan data masih berfungsi dalam kasus ini? Saya memperbarui contoh saya dengan contoh yang lebih detail. - person Quentin; 02.01.2014

arrow_upward
0
arrow_downward

Jika item Anda dalam format yang sama maka Anda ingin menggunakan ngInclude. arahan ngView digunakan untuk tujuan yang berbeda.

Pengendali:

$scope.items = {item1: {name:"test1"}, item2: {name: "test2"}};

Tampilan utama:

<div ng-repeat="item in items" ng-include="'myPartial.html'"></div>

myPartial.html:

<h2>{{item.name}}</h2>...
person Stewie    schedule 02.01.2014
comment
Struktur template saya sedikit lebih rumit seperti pada contoh, jadi saya tidak bisa menggunakan ng-repeat untuk memilih item spesifik saya. - person Quentin; 02.01.2014
comment
Nah, dalam hal ini Anda harus memperbarui pertanyaan Anda untuk mencerminkan semua efek samping yang penting. Jika tidak, Anda tidak menghormati komunitas. - person Stewie; 02.01.2014
comment
Ya saya baru saja melakukannya, tidak memikirkan ng-repeat sebelum jawaban Anda, maaf - person Quentin; 02.01.2014