Halo teman teman pada tutorial sebelumnya saya telah membahas mengenai Cara Penggunaan Scope pada Angular JS part 1, mengenai scope, pada tutorial kali ini saya akan membahas tentang Cara Penggunaan Scope pada Angular JS part 2, tentang child scope.
Child Scope merupakan sebuah prototype dari sebuah pembungkus atau parent, maksudnya yaitu hasil yang ditampilkan sama dengan parent nya.
Okay teman teman biar lebih paham kita langsung saja masuk ke study casenya tentang Cara Penggunaan Scope pada Angular JS part 2 menggunakan child scope.
Langkah yang pertama silahkan teman teman buat sebuah folder yang Cara Penggunaan Scope pada Angular JS part 2 didalam folder tersebut buatlah folder js dan di dalam folder js buat lah sebuah folder yang bernama controllers, didalam folder controller silahkan simpan script dibawah ini dengan nama MainController.js
app.controller('MainController',['$scope', function($scope){
$scope.dumet="Dumet School";
}]);
Langkah berikutnya pada folder js silahkan buat folder baru lagi yang bernama directive, di dalam folder directive silahkan simpan script dibawah ini dengan nama directive.js
app.directive('myDirective',function(){
return {
scope : true,
restrict : 'EA',
template : '<h2>Hello {{dunia}}</h2>',
replace : true,
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.dunia='Saya diklik';
scope.$digest();
});
}
};
});
Pada file directive.js kita menambahkan sebuah property link yang berfungsi untuk menghubungkan file yang ada pada directive.js dengan file yang berada pada controller, maka ketika variable hello diklik yang berada scope di klik maka nilainya akan berubah menjadi saya di klik
Selanjutnya kita akan membuat sebuah file yang bernama app.js yang disimpan didalam folder js dan silahkan simpan script dibawah ini di dalam app.js tersebut
var app=angular.module('FirstApp',[]);
Jika sudah silahkan simpan script dibawah ini dengan nama index.html yang berada di dalam folder Cara Penggunaan Scope pada Angular JS part 2, yang telah kita buat sebelumnya.
Nah, jika kita jalankan pada browser maka hasilnya seperti dibawah ini,
- sebelum di klik
- setelah di klik
Oke teman teman cukup skian tutorial saya kali ini mengenai Cara Penggunaan Scope pada Angular JS part 2, mengenai scope child
Semoga bermanfaat Terimakasih.
https://www.kursuswebsite.org/cara-pengunaan-scope-pada-angular-js-part-1/