Scope merupakan sebuah object yang terdapat didalam Agular JS yang berfungsi untuk menghubungkan antara Controller dan View, derective secara default berasal dari scope yang di miliki oleh parentnya jadi ketika scope yang berda pada directive berubah maka secara otomatis scope yang yang ada parent nya juga akan berubah
Biar lebih paham kita langsung saja ke study case nya tentang Cara Penggunaan Scope pada Angular JS part 1
Yang pertama silahkan teman teman buat sebuah folder yang bernama Cara penggunaan Scope pada Angular JS part 1 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 {
restrict : 'EA',
template : '<h2>Hello {{dumet}}</h2>',
replace : true,
link : function(scope,elem,attrs){
elem.bind('click',function(){
scope.dumet='Saya kursus disini';
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 halo dumet school diklik yang berada scope di klik maka nilainya akan berubah menjadi halo saya kursus disini
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 1, yang telah kita buat sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar AngularJs</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/directive/directive.js"></script>
<script type="text/javascript" src="js/controllers/MainController.js"></script>
<body ng-app="FirstApp">
<div ng-controller="MainController">
<b>school</b> dari hasil controller scope </br>
<h2>Hello {{dumet}} </h2>
<hr/>
<b>school</b> dari hasil directive scope </br>
<my-directive> </my-directive>
</div>
</body>
</html>
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 1,
Semoga bermanfaat Terimakasih.